Quando si costruiscono interfacce utente per applicazioni web, spesso ci si trova di fronte a scenari come "Visualizzare un elenco di elementi se è disponibile, oppure mostrare un segnaposto se è vuoto." In Angular, questi tipi di compiti vengono gestiti tramite le direttive strutturali — potenti strumenti che controllano cosa viene renderizzato nel template e quando.

A differenza dei normali attributi HTML, le direttive strutturali non si limitano a modificare il comportamento di un elemento — cambiano effettivamente la struttura del DOM aggiungendo o rimuovendo interi elementi.

Direttiva Strutturale NgFor

Supponiamo di avere un elenco di attività nel nostro TaskListComponent. Ogni attività deve essere mostrata con i propri elementi di interfaccia: un pulsante per eliminare, un interruttore di stato, ecc. Scrivere manualmente ogni attività nell'HTML sarebbe inefficiente e difficile da mantenere man mano che i dati cambiano.

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

Angular fornisce la direttiva *ngFor, che consente di iterare su un array e generare automaticamente un elemento HTML per ogni elemento dell'array.

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

Qui, *ngFor="let task of tasks" indica ad Angular: "Per ogni task nell'array tasks, crea un <task-component>". Se l'array contiene 3 task, Angular renderizzerà 3 istanze separate di task-component, ognuna con i propri dati. Questo rende l'interfaccia utente più scalabile ed elimina la ripetizione del codice.

Funzionalità Extra di ngFor

Oltre all'iterazione di base, *ngFor supporta diverse variabili di contesto utili a cui puoi accedere direttamente nella direttiva usando let.

Ecco un rapido riferimento:

Ecco un esempio che utilizza alcune di esse:

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

In questo esempio, la variabile odd viene utilizzata per applicare una classe CSS a ogni altra riga, rendendo l'elenco visivamente più facile da scansionare.

Direttiva Strutturale NgIf

Esaminiamo come funziona il rendering condizionale utilizzando un semplice esempio di elenco di attività. Si desidera visualizzare l'elenco se contiene attività e, se è vuoto, mostrare un messaggio come "Nessuna attività al momento".

In Angular, si utilizza la direttiva *ngIf per mostrare o nascondere elementi in modo condizionale. Anche se sembra un normale attributo HTML, in realtà svolge molte più funzioni dietro le quinte.

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

Quando Angular elabora *ngIf, riscrive il template in background. Invece di renderizzare direttamente l'elemento, lo incapsula all'interno di un <ng-template>, aggiungendolo al DOM solo se la condizione è true.

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

Se la condizione viene valutata come false (cioè, tasks.length === 0), Angular non renderizza affatto l'elemento — è completamente assente dal DOM.

Ma cosa succede se si desidera mostrare un messaggio di fallback invece di nascondere semplicemente il contenuto? È qui che la clausola else di *ngIf risulta utile. Permette di fare riferimento a un template alternativo utilizzando un <ng-template> con un'etichetta personalizzata.

Ecco cosa succede:

• Angular verifica innanzitutto se l'array tasks contiene elementi;

• Se sì, renderizza il <div> con i componenti dei task;

• Se l'array è vuoto, utilizza il template #noTasks e visualizza il messaggio: "No tasks yet 😊".

Questo rende i template molto più puliti e aiuta a gestire gli stati vuoti in modo intuitivo per l'utente.