Two Way Binding In Angular

In this demo, we see how the data passes between Model and View and both are in synchronization, using Two way binding in Angular.

Normally, View displays the data, which it get from the model. In this demo, we see how the data passes between Model and View and both are in synchronization, using Two way binding.

 

Step 1

Add a .js script with the code given below.

 

 

Step 2

Add HTML code. Inculde the script and bind the Message property with div and also with the Input textbox. 

 

 

Step 3

Run the code in the Browser.

You see that the value provided by Model is binded with View. 

Step 4 

Now, if you change the value of Text box, you will see that the value displaying in div also changes. 

It shows there is Two way binding between Model and View. If the data in one of the component changes, the other will be in synchronization.