Bij het bouwen van gebruikersinterfaces voor webapplicaties komen we vaak scenario's tegen zoals "Toon een lijst van items als deze beschikbaar is, of geef een placeholder weer 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 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 gegevens veranderen.

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 door een array kan worden gelust en automatisch een HTML-element voor elk item wordt gegenereerd.

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

Hier geeft *ngFor="let task of tasks" aan Angular: "Voor elke taak in de array tasks, één <task-component> aanmaken". Als de array 3 taken bevat, rendert Angular 3 afzonderlijke task-component-instanties, elk met 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 benaderen met let.

Hier is een snel overzicht:

Hier is een voorbeeld waarin enkele van deze 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

Bekijk hoe voorwaardelijke weergave werkt met 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 weer te geven of te verbergen. Hoewel het lijkt op 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 uit 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 via een <ng-template> met een aangepaste label.

Dit is wat er gebeurt:

• Angular controleert eerst of de array tasks 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 om lege toestanden op een gebruiksvriendelijke manier te beheren.