Gegevensbinding verbindt de klasse van een component met zijn template. Angular heeft vier vormen, onderscheiden door de richting van de gegevensstroom en hun karakteristieke syntaxis.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
Vierkante haakjes [ ] binden een eigenschap aan een expressie (eenrichtings, gegevens stromen omlaag in de weergave).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
Haakjes ( ) luisteren naar gebeurtenissen (eenrichtings, gegevens stromen omhoog van de weergave naar de klasse).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
De [(...)] syntaxis ("banaan in een doos") combineert property + event binding voor tweerichtingssynchronisatie — meestal met ngModel op formulierinvoer.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
De tweerichtings [()] is gewoon property binding [] plus event binding () gecombineerd — de haakjes tonen de richtingen.
Gegevensbinding is hoe Angular de klasse en template gesynchroniseerd houdt — het is het mechanisme achter elke dynamische UI.
Het kennen van de vier typen en hun syntaxis ({{}}, [], (), [()]) en welke richting elk stroomt is essentieel voor het lezen en schrijven van elke Angular-template; bijna elke regel van een Angular-template gebruikt een van deze.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren