Bij het bouwen van gebruikersinterfaces voor webapplicaties komen we vaak scenario's tegen zoals "Toon een lijst van items als deze beschikbaar is, of toon een placeholder als deze leeg is." In Angular worden dit soort taken afgehandeld met structurele directives — krachtige hulpmiddelen die bepalen wat er in de template wordt weergegeven en wanneer.

In tegenstelling tot gewone HTML-attributen passen structurele directives niet alleen het gedrag van een element aan — ze veranderen daadwerkelijk de structuur van de DOM door volledige elementen toe te voegen of te verwijderen.

Structurele Directive NgFor

Stel dat je een lijst met taken hebt in onze TaskListComponent. Elke taak moet worden weergegeven met zijn eigen interface-elementen: een verwijderknop, een status-toggle, enzovoort. Elke taak handmatig in de HTML schrijven zou inefficiënt zijn en lastig te onderhouden naarmate de data verandert.

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

Angular biedt de *ngFor-directive, waarmee je door een array kunt itereren en automatisch een HTML-element voor elk item genereert.

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

Hier geeft *ngFor="let task of tasks" aan Angular: "Voor elke taak in de tasks-array, maak één <task-component>". Als de array 3 taken bevat, zal Angular 3 afzonderlijke task-component-instanties renderen, elk met zijn eigen data. Dit maakt de gebruikersinterface schaalbaarder en voorkomt herhalende code.

Extra functies van ngFor

Naast de basisiteratie ondersteunt *ngFor verschillende handige contextvariabelen die je direct in de directive kunt gebruiken met let.

Hier is een snel overzicht:

Hier is een voorbeeld waarin enkele van deze variabelen worden gebruikt:

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

In dit voorbeeld wordt de variabele odd gebruikt om een CSS-klasse toe te passen op elke andere rij, waardoor de lijst visueel gemakkelijker te scannen is.

Structurele Directive NgIf

Laten we bekijken hoe conditionele weergave werkt aan de hand van een eenvoudig takenlijstvoorbeeld. Je wilt de lijst weergeven als deze taken bevat, en als deze leeg is, een bericht tonen zoals "Nog geen taken".

In Angular gebruik je de *ngIf-directive om elementen conditioneel te tonen of te verbergen. Hoewel het eruitziet als een gewone HTML-attribuut, doet het achter de schermen veel meer.

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

Wanneer Angular *ngIf verwerkt, herschrijft het de template op de achtergrond. In plaats van het element direct te renderen, wordt het binnen een <ng-template> geplaatst en alleen aan de DOM toegevoegd als de conditie true is.

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

Als de voorwaarde evalueert naar false (d.w.z. tasks.length === 0), rendert Angular het element helemaal niet — het is volledig afwezig in de DOM.

Maar wat als je in plaats van het verbergen van de inhoud een alternatieve boodschap wilt tonen? Daarvoor is de else-clausule van *ngIf handig. Hiermee kun je verwijzen naar een alternatief sjabloon met een <ng-template> en een aangepaste label.

Dit is wat er gebeurt:

• Angular controleert eerst of de tasks-array items bevat;

• Als dat zo is, rendert het de <div> met de taakcomponenten;

• Als de array leeg is, gebruikt het het #noTasks-sjabloon en toont het het bericht: "No tasks yet 😊".

Dit maakt je sjablonen veel overzichtelijker en helpt bij het op een gebruiksvriendelijke manier beheren van lege toestanden.