Al construir interfaces de usuario para aplicaciones web, a menudo nos enfrentamos a escenarios como "Mostrar una lista de elementos si está disponible, o mostrar un marcador de posición si está vacía." En Angular, este tipo de tareas se gestionan utilizando directivas estructurales — herramientas potentes que controlan qué se renderiza en la plantilla y cuándo.

A diferencia de los atributos HTML normales, las directivas estructurales no solo modifican el comportamiento de un elemento, sino que realmente cambian la estructura del DOM añadiendo o eliminando elementos completos.

Directiva Estructural NgFor

Supongamos que tienes una lista de tareas en tu TaskListComponent. Cada tarea debe mostrarse con sus propios elementos de interfaz: un botón para eliminar, un interruptor de estado, etc. Escribir cada tarea manualmente en el HTML sería ineficiente y difícil de mantener a medida que los datos cambian.

tasks = [
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Learn Angular', completed: false }
];

Angular proporciona la directiva *ngFor, que permite iterar sobre un arreglo y generar automáticamente un elemento HTML para cada elemento.

<task-component *ngFor="let task of tasks"></task-component>

Aquí, *ngFor="let task of tasks" indica a Angular: "Por cada tarea en el arreglo tasks, crear un <task-component>". Si el arreglo contiene 3 tareas, Angular renderizará 3 instancias separadas de task-component, cada una con sus propios datos. Esto hace que la interfaz de usuario sea más escalable y elimina el código repetitivo.

Funcionalidades adicionales de ngFor

Además de la iteración básica, *ngFor admite varias variables de contexto útiles a las que se puede acceder directamente en la directiva utilizando let.

Referencia rápida:

Aquí tienes un ejemplo utilizando algunas de ellas:

<task-component
  *ngFor="let task of tasks; let i = index; let odd = odd"
  [task]="task"
  [class.odd]="odd">
</task-component>

En este ejemplo, la variable odd se utiliza para aplicar una clase CSS a cada fila alterna, facilitando la visualización de la lista.

Directiva estructural NgIf

Analicemos cómo funciona el renderizado condicional utilizando un ejemplo sencillo de lista de tareas. Se desea mostrar la lista si contiene tareas y, si está vacía, mostrar un mensaje como "No tasks yet".

En Angular, se utiliza la directiva *ngIf para mostrar u ocultar elementos de manera condicional. Aunque parece un atributo HTML común, en realidad realiza mucho más en segundo plano.

<div *ngIf="tasks.length > 0">Task List</div>

Cuando Angular procesa *ngIf, reescribe la plantilla internamente. En lugar de renderizar el elemento directamente, lo envuelve dentro de un <ng-template>, y solo lo agrega al DOM si la condición es true.

<ng-template [ngIf]="tasks.length > 0">
  <div>Task List</div>
</ng-template>

Si la condición se evalúa como false (es decir, tasks.length === 0), Angular no renderiza el elemento en absoluto; está completamente ausente del DOM.

Pero, ¿qué sucede si se desea mostrar un mensaje alternativo en lugar de simplemente ocultar el contenido? Ahí es donde resulta útil la cláusula else de *ngIf. Permite hacer referencia a una plantilla alternativa utilizando un <ng-template> con una etiqueta personalizada.

Esto es lo que sucede:

• Angular primero verifica si el arreglo tasks contiene elementos;

• Si es así, renderiza el <div> con los componentes de tareas;

• Si el arreglo está vacío, utiliza la plantilla #noTasks y muestra el mensaje: "No tasks yet 😊".

Esto hace que las plantillas sean mucho más limpias y ayuda a gestionar los estados vacíos de manera más amigable para el usuario.