Wat zijn de verschillen tussen de verschillende soorten datakoppeling in Angular?

In Angular zijn er verschillende soorten datakoppelingen die het mogelijk maken om gegevens tussen de component en de sjabloon te koppelen:

• Eigenschapsbinding (Property Binding): koppelt de eigenschap van een DOM-element aan een uitdrukking uit de component. Eenrichtingsverkeer — gegevens gaan van de component naar de sjabloon.

  <img [src]="imageUrl">
  

• Gebeurtenisbinding (Event Binding): koppelt een DOM-gebeurtenis aan een handler in de component. Maakt reageren op gebruikersacties mogelijk.

  <button (click)="onClick()">Klik mij</button>
  

• Twee-weg binding (Two-way Binding): combineert property- en eventbinding om gegevens tussen de component en de sjabloon te synchroniseren. Gebruikt de syntax [(ngModel)].

  <input [(ngModel)]="username">
  

• Interpolatie (Interpolation): plaatst de waarde uit de component in de sjabloon als tekst.

  <p>{{ username }}</p>
  

Het belangrijkste verschil ligt in de richting van gegevensoverdracht en het doel: property binding — van de component naar de sjabloon, event binding — van de sjabloon naar de component, two-way binding — synchroniseert in beide richtingen.