Two way databinding in AngularJS | Angular 6 Basic Two way data binding with ngModel | смотреть онлайн

2 way data binding angularjs
angularjs directive two way binding
angularjs two way binding example
ng-model directive example
angularjs ng-model example

In this video we will discuss, Two way databinding in AngularJS. Along the way we also discuss one of the very useful directive in angular ng-model.

One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

When the model changes the view is automatically updated. This is achieved using the data binding expression in the view.

How about the other way round. How to keep the model up to date when the view changes. That's exactly is the purpose of ng-model directive.

In the html below, notice the input element is decorated with ng-model directive. This ensures that whenever the value in the textbox is changed, angular will automatically update the message property of the $scope object. This means the ng-model directive automatically takes the form values and updates the model. The binding expression does the opposite, i.e whenever the model changes the view is automatically updated.

Because of the two way data binding provided by angular, as you type in the textbox, the value is immediately displayed on the view just below the textbox. This two way binding feature provided by angular, eliminates the need to write any custom code to move data from the model to the view or from the view to the model.

ng-model directive can be used with the following 3 html elements
input
select
textarea

Two way binding example with complex object is also discussed.

#AngularJs #DataBindingAngularJs #MjDev