Når man opbygger brugergrænseflader til webapplikationer, støder man ofte på scenarier som "Vis en liste af elementer, hvis den er tilgængelig, eller vis en pladsholder, hvis den er tom." I Angular håndteres disse opgaver ved hjælp af strukturelle direktiver — kraftfulde værktøjer, der styrer, hvad der bliver gengivet i skabelonen, og hvornår det sker.

I modsætning til almindelige HTML-attributter ændrer strukturelle direktiver ikke blot et elements opførsel — de ændrer faktisk DOM-strukturen ved at tilføje eller fjerne hele elementer.

Strukturelt Direktiv NgFor

Antag, at du har en liste af opgaver i din TaskListComponent. Hver opgave skal vises med sine egne grænsefladeelementer: en slet-knap, en statusomskifter osv. At skrive hver opgave manuelt i HTML ville være ineffektivt og svært at vedligeholde, efterhånden som dataene ændrer sig.

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

Angular tilbyder direktivet *ngFor, som gør det muligt at iterere gennem et array og automatisk generere et HTML-element for hvert element.

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

Her angiver *ngFor="let task of tasks" til Angular: "For hver task i tasks-arrayet, opret én <task-component>". Hvis arrayet indeholder 3 tasks, vil Angular gengive 3 separate task-component-instanser, hver med sine egne data. Dette gør brugergrænsefladen mere skalerbar og eliminerer gentagende kode.

Ekstra funktioner i ngFor

Ud over grundlæggende iteration understøtter *ngFor flere nyttige kontekstvariable, som du kan få adgang til direkte i direktivet ved hjælp af let.

Her er en hurtig reference:

Her er et eksempel, hvor nogle af dem bruges:

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

I dette eksempel bruges variablen odd til at anvende en CSS-klasse på hver anden række, hvilket gør listen visuelt lettere at overskue.

Strukturel Direktiv NgIf

Lad os se på, hvordan betinget rendering fungerer ved hjælp af et simpelt opgaveliste-eksempel. Du ønsker at vise listen, hvis den indeholder opgaver, og hvis den er tom, vise en besked som "Ingen opgaver endnu".

I Angular bruger du direktivet *ngIf til betinget at vise eller skjule elementer. Selvom det ligner et almindeligt HTML-attribut, gør det faktisk meget mere bag kulisserne.

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

Når Angular behandler *ngIf, omskriver den skabelonen bag kulisserne. I stedet for at gengive elementet direkte, indkapsler den det i en <ng-template>, og tilføjer det kun til DOM'en, hvis betingelsen er true.

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

Hvis betingelsen evalueres til false (dvs. tasks.length === 0), gengiver Angular slet ikke elementet — det er fuldstændigt fraværende fra DOM'en.

Men hvad nu hvis du ønsker at vise en alternativ besked i stedet for blot at skjule indholdet? Det er her, else-klausulen i *ngIf er nyttig. Den giver dig mulighed for at referere til en alternativ skabelon ved hjælp af en <ng-template> med en brugerdefineret etiket.

Sådan fungerer det:

• Angular tjekker først, om tasks-arrayet indeholder nogen elementer;

• Hvis det gør, gengives <div>-elementet med opgavekomponenterne;

• Hvis arrayet er tomt, anvendes #noTasks-skabelonen, og beskeden vises: "No tasks yet 😊".

Dette gør dine skabeloner meget mere overskuelige og hjælper med at håndtere tomme tilstande på en brugervenlig måde.