När vi bygger användargränssnitt för webbapplikationer stöter vi ofta på scenarier som "Visa en lista med objekt om den är tillgänglig, eller visa en platshållare om den är tom." I Angular hanteras dessa typer av uppgifter med hjälp av strukturella direktiv — kraftfulla verktyg som styr vad som renderas i mallen och när.

Till skillnad från vanliga HTML-attribut ändrar strukturella direktiv inte bara ett elements beteende — de förändrar faktiskt strukturen på DOM genom att lägga till eller ta bort hela element.

Strukturellt direktiv NgFor

Anta att du har en lista med uppgifter i din TaskListComponent. Varje uppgift ska visas med sina egna gränssnittselement: en raderingsknapp, en statusväxlare, etc. Att skriva ut varje uppgift manuellt i HTML skulle vara ineffektivt och svårt att underhålla när datan förändras.

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

Angular tillhandahåller direktivet *ngFor, vilket gör det möjligt att iterera över en array och automatiskt generera ett HTML-element för varje objekt.

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

Här anger *ngFor="let task of tasks" för Angular: "För varje task i arrayen tasks, skapa en <task-component>". Om arrayen innehåller 3 tasks, kommer Angular att rendera 3 separata instanser av task-component, var och en med sina egna data. Detta gör användargränssnittet mer skalbart och eliminerar upprepande kod.

Extra funktioner i ngFor

Förutom grundläggande iteration stöder *ngFor flera användbara kontextvariabler som du kan komma åt direkt i direktivet med hjälp av let.

Här är en snabbreferens:

Här är ett exempel där några av dem används:

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

I det här exemplet används variabeln odd för att tillämpa en CSS-klass på varannan rad, vilket gör listan visuellt lättare att överskåda.

Strukturell direktiv NgIf

Vi ska titta på hur villkorlig rendering fungerar med hjälp av ett enkelt uppgiftslistexempel. Du vill visa listan om den innehåller uppgifter, och om den är tom, visa ett meddelande som "Inga uppgifter ännu".

I Angular använder du direktivet *ngIf för att villkorligt visa eller dölja element. Även om det ser ut som en vanlig HTML-attribut, gör det faktiskt mycket mer bakom kulisserna.

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

När Angular behandlar *ngIf omskriver den mallen i bakgrunden. Istället för att rendera elementet direkt, kapslar den in det i en <ng-template>, och lägger endast till det i DOM:en om villkoret är true.

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

Om villkoret utvärderas till false (dvs. tasks.length === 0), renderar Angular inte elementet alls — det är helt frånvarande från DOM:en.

Men om du vill visa ett reservmeddelande istället för att bara dölja innehållet? Det är här else-satsen i *ngIf är användbar. Den låter dig referera till en alternativ mall med en <ng-template> och en anpassad etikett.

Så här fungerar det:

• Angular kontrollerar först om tasks-arrayen har några objekt;

• Om den har det, renderas <div> med uppgiftskomponenterna;

• Om arrayen är tom används #noTasks-mallen och meddelandet visas: "No tasks yet 😊".

Detta gör dina mallar mycket renare och hjälper till att hantera tomma tillstånd på ett användarvänligt sätt.