What are the different types of data binding in Angular?

Angular supports four types of data binding, and they differ in which way the data flows.

1. Interpolation shows a component value as text in the template. Data flows one way, from component to template.

<h1>{{title}}</h1>

1. Property binding sets a property of an element, such as src or disabled, from a component value. It also flows from component to template.

<img [src]="imageUrl">
<button [disabled]="isDisabled">

1. Event binding calls a component method when the template raises an event. Data flows one way, from template to component.

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

1. Two-way binding combines property and event binding, so a change on either side updates the other. Using it with ngModel needs FormsModule.

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