Two way Data Binding in Angular 8
We have seen that in one-way data binding any change in the template (view) were not be reflected in the component TypeScript code. To resolve this problem, Angular provides two-way data binding. The two-way binding has a feature to update data from component to view and vice-versa.
In two-way databinding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model, it will be reflected in the View and when you make changes in View, it will be reflected in Model.
This happens immediately and automatically, ensures that the HTML template and the TypeScript code are updated at all times.
In two way data binding, property binding and event binding are combined together.
Syntax:
Note: For two way data binding, we have to enable the ngModel directive. It depends upon FormsModule in angular/forms package, so we have to add FormsModule in imports[] array in the AppModule.
Let’s take an example to understand it better.
Open your project’s app.module.ts file and use the following code:
app.component.ts file:
app.component.html file:
Now, start your server and open local host browser to see the result.
Output:
You can check it by changing textbox value and it will be updated in component as well.
For example: