This post is primarily focused on what data binding is and the types of data binding available.

String Interpolation.

Property Binding.

Event Binding.

Two-Way Data Binding.

Data binding is one of the most powerful and important features in any software development language. It allows us to define communication between the component and view. So we can say that data binding is passed from component to view and from view to the component.

Types of Data Binding in Angular

1. String Interpolation: The type of one-way data binding where text is between a set of curly braces often uses the name of a component property. Angular replaces that name with the string value of the corresponding component property. The syntax of string interpolation is to use double curly braces {{ code }}.

2: Property Binding: Property Binding allows us to bind the view of the template expression. Property binding in simple term is defined as updating the value of a certain variable in component (model) and displaying it in view (presentation layer).

This is a one-way mechanism, thus it allows you to change the value whenever you want but only at the component level.

So now you can check that both the buttons are disabled, but if we change the value of the variable to false, we can see that button in the string interpolation code is still disabled while in property binding code it is enabled.

Now we can see that button in string interpolation is still disabled while in property binding it is enabled now.

Note: So where you have to use string expression use interpolation and when you are dealing with non-string expression using property binding.

3: Event Binding: Event binding is defined as the updating/sending of the value/information of a certain variable from the presentation layer (view) to the component (model). For example, clicking a button.

binding.component.html

<h1 Event Binding></h1>
<h1>{{title}}</h1>
<button (click)="changeMyTitle()">Title is changed on click of this button.</button>

Now the user will take any action from the template and, according to that this method, it will invoke and execute. Also, click() is not the only DOM event available; you can also use other events such as submit, mouse enter, blur events, etc.

4: Two-Way Data Binding: Two-way data binding is a combination of both Property and Event binding and it is a continuous synchronization of a data from view to the component and component to the view, i.e. changes made in the component's data should sync to the view and should immediately update the model into the corresponding component with view data.

Two-way data binding is mainly used in data entry forms where the user changes the view and makes changes in the model with the view data and vice-versa. So, as we know, Angular uses the combination of Property binding and event binding to implement two-way data binding with the help of the ngModeldirective.

NgModelis not a part of Angular's code library, it is defined in the forms module library so you need to import the FormsModulelibrary in your app.module.ts file. Now we can use the ngModel directive to implement two-way data binding.