Javatpoint Logo
Javatpoint Logo

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.

Two way Data Binding in Angular 8

Let's take an example to understand it better.

Open your project's app.module.ts file and use the following code:


Two way Data Binding in Angular 8

app.component.ts file:


Two way Data Binding in Angular 8

app.component.html file:


Two way Data Binding in Angular 8

Now, start your server and open local host browser to see the result.

Output:

Two way Data Binding in Angular 8

You can check it by changing textbox value and it will be updated in component as well.

For example:

Two way Data Binding in Angular 8
Next TopicAngular 8 Forms




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA