Templates en databinding

Met interpolatie kun je waarden uit je component in de HTML invoegen. Gebruik dubbele accolades om gegevens weer te geven:

{{ data }}

{{ username }}

Met eigenschapsbinding kun je eigenschappen van HTML-elementen dynamisch instellen:

[src] = "imageUrl"

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

Met gebeurtenissenbinding kan je applicatie reageren op acties van gebruikers:

(click)="onClick()"

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

Met tweerichtingsbinding blijven je gebruikersinterface en gegevens gesynchroniseerd. Gebruik [(ngModel)]:

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

Structurele directives wijzigen de indeling van de DOM. Voorbeelden zijn *ngIf en *ngFor.

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

*ngFor doorloopt gegevens en geeft elementen herhaaldelijk weer:

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

Je hebt geleerd hoe je sjablonen en gegevensbinding gebruikt om dynamische Angular-weergaven te maken!