Når du bygger brukergrensesnitt for webapplikasjoner, møter vi ofte scenarier som «Vis en liste med elementer hvis den er tilgjengelig, eller vis en plassholder hvis den er tom.» I Angular håndteres slike oppgaver ved hjelp av strukturelle direktiver — kraftige verktøy som styrer hva som blir gjengitt i malen og når.

I motsetning til vanlige HTML-attributter, endrer strukturelle direktiver ikke bare oppførselen til et element — de endrer faktisk strukturen til DOM ved å legge til eller fjerne hele elementer.

Strukturelt direktiv NgFor

La oss si at du har en liste med oppgaver i TaskListComponent. Hver oppgave skal vises med egne grensesnittelementer: en slett-knapp, en statusbryter, osv. Å skrive hver oppgave manuelt i HTML ville vært ineffektivt og vanskelig å vedlikeholde etter hvert som dataene endres.

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

Angular tilbyr direktivet *ngFor, som lar deg iterere gjennom et array og automatisk generere et HTML-element for hvert element.

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

Her angir *ngFor="let task of tasks" til Angular: "For hver oppgave i tasks-arrayet, opprett én <task-component>". Hvis arrayet inneholder 3 oppgaver, vil Angular gjengi 3 separate task-component-instanser, hver med sine egne data. Dette gjør brukergrensesnittet mer skalerbart og eliminerer gjentakende kode.

Ekstra funksjoner i ngFor

I tillegg til grunnleggende iterasjon, støtter *ngFor flere nyttige kontekstvariabler du kan få tilgang til direkte i direktivet ved å bruke let.

Her er en rask referanse:

Her er et eksempel som bruker noen av dem:

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

I dette eksempelet brukes variabelen odd til å tildele en CSS-klasse til annenhver rad, noe som gjør listen visuelt lettere å lese.

Strukturdirektiv NgIf

La oss se på hvordan betinget rendering fungerer ved hjelp av et enkelt oppgaveliste-eksempel. Du ønsker å vise listen hvis den inneholder oppgaver, og hvis den er tom, vise en melding som "Ingen oppgaver ennå".

I Angular bruker du direktivet *ngIf for å vise eller skjule elementer betinget. Selv om det ser ut som et vanlig HTML-attributt, gjør det faktisk mye mer i bakgrunnen.

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

Når Angular behandler *ngIf, omskriver den malen i bakgrunnen. I stedet for å gjengi elementet direkte, pakker den det inn i en <ng-template>, og legger det kun til i 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), vil Angular ikke gjengi elementet i det hele tatt — det er fullstendig fraværende fra DOM-en.

Men hva om du ønsker å vise en alternativ melding i stedet for bare å skjule innholdet? Det er her else-setningen til *ngIf er nyttig. Den lar deg referere til en alternativ mal ved å bruke en <ng-template> med en egendefinert etikett.

Dette skjer:

• Angular sjekker først om tasks-arrayen har noen elementer;

• Hvis den har det, gjengis <div> med oppgavekomponentene;

• Hvis arrayen er tom, brukes #noTasks-malen og meldingen vises: "No tasks yet 😊".

Dette gjør malene dine mye ryddigere og hjelper med å håndtere tomme tilstander på en brukervennlig måte.