Angular – Ejemplo con la directiva ngIf

Una de las principales directivas en angular es la directiva ngIf, que como en cualquier lenguaje funciona como un condicional, es decir, que dependiendo la condición que estemos validando nos ayudara a mostrar uno u otro elemento, solo que al ser un framework para frontend la sintaxis es un poco diferente.

La directiva se comporta como un condicional y existen distintas forma de darle uso, es posible para usar el condicional para mostrar o no un elemento haciendo uso únicamente de la primera condición, podemos definir que en caso que se cumpla la primera condición el contenido a mostrar sea diferente según los distintos valores, esta segunda es preferible integrarla con ngSwitch, así como el @if podemos incorporar un @then o un @else, adicional podemos integrarlo con observadores, así que a continuación veremos algunos ejemplos para cada caso descrito anteriormente.

En este primer ejemplo mostraremos o no una lista de tareas que vimos en el articulo «Listar elementos en Angular con ngFor«, lo que haremos será tener un botón que permita mostrar o ocultar el listado de tareas.

En este caso al dar click en el botón Mostrar tareas, nos desplegara la lista de tareas y en caso contrario las ocultara, la condición al no ser tan compleja es posible colocarla en el template de html.

Ahora veamos el mismo ejemplo pero agregando @else lo que nos permitirá mostrar un valor o un elemento por defecto cuando la primer condición no se cumpla, el cambio que haremos sera que en caso de no haber ninguna tarea mostraremos el texto «Aún no hay tareas en tu lista» y en caso que si haya tareas mostraremos la lista de tareas.

Es importante mencionar que no podemos tener la directiva de ngFor y la directiva ngIf en el mismo div, para ello usaremos un ng-container que nos funcionara como un wrapper y que al renderizar el elemento no nos generara un div adicional. Por otro lado utilizaremos ng-template para resolver el valor por defecto con @else.

En la siguiente imagen no hay ninguna tarea que mostrar, por lo que aunque el primer condicional sea true y se deban mostrar las tareas, el segundo condicional dice que no hay tareas, por lo que debe mostrar «Aún no hay tareas en tu lista».

En el siguiente ejemplo aplicaremos @if, @then y @else, lo que haremos en el ejemplo es que si tenemos muchas tareas de alta prioridad mostraremos el mensaje: «No dejes pasar un día mas, estas por tener tareas difíciles de concluir«, si en su mayoría son tareas de mediana prioridad mostraremos: «Recuerda que tienes tareas importantes por resolver«, si la mayoría son de baja prioridad mostraremos «La mayor cantidad de tus tareas son de baja prioridad«, adicional agregaremos el mensaje en caso que no haya ninguna tarea.

En este último ejemplo haremos un ejercicio donde emularemos que los datos los recibimos de un servicio web, lo que emularemos será que los datos estan cargando y conforme se agreguen elementos estos aparecerán en el listado de tareas.

Como has podido ver, la directiva ngIf aunque es de las mas importantes y que también es muy sencilla, como has podido leer tiene muchas formas de utilizar, no solo es mostrar u ocultar un elemento, si no que también podemos trabajar con observables, podemos mostrar un elemento u otro en caso de ser necesario, sin necesidad de colocar mas ngIf. Recuerda seguirnos el próximo articulo veremos ngSwitch, aunque es parecido a ngIf nos ayudara a mantener el código más limpio cuando tenemos más de dos posibilidades.