What are the differences between various data binding types in Angular?

In Angular, there are different types of data binding that allow you to connect data between a component and a template:

• Property Binding: binds a DOM element property to an expression from the component. One-way — data flows from the component to the template.

  <img [src]="imageUrl">
  

• Event Binding: binds a DOM event to a handler in the component. Allows reacting to user actions.

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

• Two-way Binding: combines property and event binding to synchronize data between the component and the template. Uses the syntax [(ngModel)].

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

• Interpolation: inserts a value from the component into the template as text.

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

The main difference lies in the direction of data transfer and purpose: property binding — from component to template, event binding — from template to component, two-way binding — synchronization in both directions.