Two-way Data Binding in Angular 8

Two-way data binding is a synchronization between the model and the view. We can use the ngModel directive in two-way data binding. Custom two-way data binding is useful in form controls.

We have analyzed that in one-way data binding, changes in the template were not be reflected in the component Typescript code. To overcome this problem, Angular provides two-way data binding. The two-way Data binding has a feature to update data from component to the view and view to the component.

In the two-way data binding, property binding, and event binding, both are combined.

Two-way Data Binding in Angular 8

In two-way data binding, changes are reflected in both components. When we make changes in the model, it will be reflected in the view, and when we make changes in view, it will be reflected in the model.

Syntax:

two-way data binding

Example:

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

two way data binding

app.component.ts file:

two way Data binding angular 8

app.component.html file:

open the localhost browser

Then start the server and open the localhost browser to the result.

Output:

two way data binding example

We can check it by changing the textbox value, and it changed automatically in the component.

For Example:

data binding angular

Pin It on Pinterest

Share This