The process of syncing the data between the component’s class and the template is known as data binding in Angular. Numerous forms of data binding are supported by Angular, including:
Interpolation
The value of a property is displayed in the template in this type of data binding, which is the most fundamental. For instance:
<p>{{ message }}</p>
Between the <p> tags in this case, the value of the message attribute in the component’s class will be shown.
Property Binding
This kind of data binding is used to link a DOM element’s property to a component’s class property. For instance:
<img [src]="imageUrl">
Here, the src property of the <img> element will be connected to the value of the imageUrl field in the component’s class.
Event Binding
A DOM event can be linked to a method in the component’s class using this kind of data binding. For instance:
<button (click)="onClick()">Click me</button>
The component’s class’s onClick() method will be invoked in this case whenever the button is clicked.
Two-way binding
The component’s class and the template can exchange data using this type of data binding, which mixes property binding and event binding. For instance:
<input [(ngModel)]="name">
In this case, the input element’s value will be bound to the name property’s value in the component’s class, and any changes made to the input element will be reflected in the name property.
Powerful data binding features that Angular offers make it simple to keep the view and the model in sync and speed up development.
