Templates og databinding

Interpolation giver dig mulighed for at indsætte værdier fra din komponent i HTML'en. Brug dobbelte tuborgklammer til at vise data:

{{ data }}

{{ username }}

Egenskabsbinding giver dig mulighed for at angive egenskaber for HTML-elementer dynamisk:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Hændelsesbinding giver din applikation mulighed for at reagere på brugerhandlinger:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Tovejsbinding holder din brugergrænseflade og dine data synkroniserede. Brug [(ngModel)]:

<input [(ngModel)]="user.name">

Strukturelle direktiver ændrer DOM-layoutet. Eksempler omfatter *ngIf og *ngFor.

<div *ngIf="isVisible">Visible Content</div>

*ngFor gennemløber data og viser elementer gentagne gange:

<li *ngFor="let item of items">{{ item }}</li>

Du har lært, hvordan du bruger skabeloner og databinding til at oprette dynamiske Angular-visninger!