När användargränssnitt för webbapplikationer byggs uppstår ofta scenarier som "Visa en lista med objekt om den finns 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 förändrar strukturella direktiv inte bara ett elements beteende — de ä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 möjliggör iterering genom en array och automatiskt genererar 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 tasks-arrayen, skapa en <task-component>". Om arrayen innehåller 3 tasks kommer Angular att rendera 3 separata task-component-instanser, var och en med sin egen data. Detta gör användargränssnittet mer skalbart och eliminerar upprepande kod.

Extra funktioner i ngFor

Utöver 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 snabb referens:

Här är ett exempel som använder några av dem:

<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 tilldela en CSS-klass till 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 exempel på en att göra-lista. Du vill visa listan om den innehåller uppgifter, och om den är tom ska ett meddelande som "No tasks yet" visas.

I Angular används direktivet *ngIf för att villkorligt visa eller dölja element. Även om det ser ut som ett vanligt 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 vad händer 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 gör det möjligt att referera till en alternativ mall med en <ng-template> och en anpassad etikett.

Så här fungerar det:

• Angular kontrollerar först om arrayen tasks innehåller några objekt;

• Om den gör det, renderas <div>-elementet med task-komponenterna;

• Om arrayen är tom används mallen #noTasks 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.