Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application.
Find the below the example, I've bind the fName
and lName
model variables to a couple of form input elements. When the page is loaded, the input elements are initialized to those of the respective model variables and whenever the user types something in an input, the value of the model variable is modified as well (two way).
In this example I've used ng-show
and ng-hide
for show/hide preview based on input fields values.