Uso de ngIf y ngFor para control de flujos en Angular

¿Cómo utilizar ng-if en Angular?

El ng-for en Angular te permite iterar sobre elementos, pero en ocasiones es fundamental controlar la renderización de elementos según ciertas condiciones. Aquí es donde entra el ng-if como estructura de control. Descubre cómo utilizar esta poderosa herramienta para manipular de manera dinámica tus componentes en Angular.

¿Qué es ng-if y cómo funciona?

El ng-if es un condicional en Angular que decide si un elemento debe ser renderizado o no. A diferencia de simplemente ocultar un elemento, si la condición del ng-if no se cumple, el elemento no será generado en el DOM. Veamos cómo implementarlo con un ejemplo sencillo:

<div *ngIf="1 === 1">
  Este contenido se muestra porque la condición se cumple.
</div>

Si la condición 1 === 1 es verdadera, el div se renderiza. Si cambiamos la condición a algo falso como 1 === 2, el div simplemente no aparecerá.

¿Cómo manejar condicionales más complejas?

Además de las condiciones simples, el ng-if permite usar expresiones complejas y anidaciones para crear lógica más rica. Supongamos que tienes una señal name y quieres renderizar contenido solo si el valor es "Nicolás":

<div *ngIf="name() === 'Nicolás'">
  Soy Nicolás
</div>

Es crucial recordar que estas comparaciones son case sensitive, por lo que "nicolás" no se consideraría igual a "Nicolás".

¿Cómo trabajar con objetos y señales?

Supongamos que tienes un objeto person con atributos, y quieras que su renderización responda de forma reactiva a sus valores. Convertimos el objeto en una señal y lo utilizamos en una condición:

const personSignal = signal({
  name: 'Nicolás',
  age: 20
});

<div *ngIf="personSignal().name === 'Nicolás' && personSignal().age > 18">
  Soy Nicolás y soy mayor de 18
</div>

Aquí, el contenido solo se renderizará si el nombre es "Nicolás" y la edad es mayor a 18.

¿Cómo implementar un else en ng-if?

Angular también permite manejar un else utilizando ng-template. Es decir, si la primera condición no se cumple, puedes definir qué contenido se mostrará:

<div *ngIf="condition; else elseBlock">
  Esta es la condición verdadera.
</div>
<ng-template #elseBlock>
  Esta es la condición falsa.
</ng-template>

Puedes modificar el contenido del else cambiando el nombre del bloque como requieras, utilizando #nombreDelBloque.

¿Cómo hacer adaptativo el contenido de ng-if?

Para hacer el contenido dinámico y reactivo, podemos enlazarlo a un input. Adicionalmente, para manejar la pluralización basada en la cantidad de elementos en una lista:

<!-- Input para modificar la edad -->
<input type="number" (change)="changeAge($event)">

<!-- Control de pluralización -->
<div *ngIf="items.length > 1">
  {{ items.length }} items
</div>
<div *ngIf="items.length === 1">
  1 item
</div>

Implementar la lógica de pluralización correctamente es un reto común. Intenta resolverlo evaluando el número de elementos en tu array y ajustando el texto para que corresponda en singular o plural.

A medida que domines estas herramientas, podrás crear aplicaciones Angular más dinámicas y efectivas. ¡Sigue experimentando y aprendiendo con las múltiples posibilidades que Angular te ofrece!