Hva er ng-template i Angular?
Jeg skal bli den beste Angularutvikleren jeg kan bli. For å bli best må man kunne det grunnleggende godt. Meget godt!
🤔 Hva er greia med ng-template?
I korte trekk: ng-template er direktivet som produseres i bakkant når du bruker snacksy angularsukker som *ngIf og *ngFor.
Du skriver dette:
<div *ngIf="noe som kan være sant">Et eller annet..</div>
og Angular produserer no a la dette i bakkant:
<ng-template [ngIf]="noe som kan være sant"><div>Et eller annet..</div></ng-template>
Ikke så veldig livsendrende informasjon å sitte på, men kult å vite. Uansett så har du nok vært borti iværtfall to anledning hvor du har vært nødt til å benytte ng-template.
🔀 En else til din ngIf
Du kan selvfølgelig fyre opp en *ngIf for både den positive og den negative tilstanden, sånn ca. slik:
<div *ngIf="noe">Et eller annet..</div><div *ngIf="!noe">Et eller annet annet...</div>
For så vidt greit. Innhold inne i
<div *ngIf="noe else alternativet">Et eller annet..</div><ng-template #alternativet">Et eller annet annet...</ng-template>
eller evt.
<ng-template [ngIf="noe"] [ngIfElse]="alternativet">Et eller annet..</ng-template><ng-template #alternativet">Et eller annet annet...</ng-template>
for *ngFor blir magien i bakkant slik:
// det som skal itereres overconst persons = [{name: 'geir'},{name: 'tore'},{name: 'berit'},]<ul><li *ngFor="let person of persons; let i = index;">{{ i }}: {{ person.name }}</li></ul>// Blir det samme som:<ul><ng-template ngFor let-person let-i="index" [ngForOf]="persons"><li>{{ i }}: {{ person.name }}</li></ng-template></ul>
🛑 Flere strukturelle direktiver på samme element? Njet!
Det hender jo absolutt innimellom at man ønsker å løkke gjennom noe 'hvis' ett eller annet. Da hadde det jo vært glimrende å kunne gjøre noe slikt:
<div *ngFor="let cat of cats" *ngIf="noDogs">{{ cat.hungry? }}</div>
Akk, men nei! Det lar seg ei gjøre. Løsning kan jo tenkes å bli noe slik da:
<div *ngIf="noDogs"><div *ngFor="let cat of cats">{{ cat.hungry? }}</div></div>
Litt skittent med litt ekstra fjas i dokumentet 🚯, så hva hvis vi henter inn en venn av ng-template? La meg introdusere ng-content!
<ng-content *ngIf="noDogs"><div *ngFor="let cat of cats">{{ cat.hungry? }}</div></ng-content>
🏆 Kult! Fungerer som bare det. ng-content har så meget kult å by på. Jeg tenker at vi gløtter litt mer på den i en egen post.