There are three types of data bindings in Angular , they are as follows:
- Interpolation
- Event Binding
- Property Binding
If you are coming from Angular 1.X background, you might be wondering that where is the two-way data binding? Remember, when first time you saw AngularJS 1.X demo, and was just blown away by power of ng-model? Yes, like you, I was also very impressed by power of two-way data binding in AngularJS 1. Even though, AngularJS 1 two-way data binding was beautiful, it came with the baggage of digest cycle and $watch.
To simplify the things, Angular does not have any built in Two-Way data binding. It does not mean; you cannot have two-way data binding in Angular application. Come on, we cannot think of creating a modern web application without having power of two-way data binding. So, in this post, we are going to learn, how to work with two-way data binding in Angular.
Two-way data binding with ngModel
Angular provides us a directive ngModel to achieve two-way data binding. It is very simple and straight forward to use ngModel directive as shown in the listing below:
To use ngModel directive, we need to import FormsModule in the application. For your reference, below I am listing app.module.ts which is importing FormsModule besides other required modules.
In above demo, when typing into the input element, the input’s value will be assigned to name variable and also it would be displayed back to the view. So we are implementing two-way data binding using ngModel as shown in the below image:
Two-way data binding without ngModel
To understand ngModel directive working, let us see how we can achieve two-way data binding without using ngModel directive. To do that, we need to use
- Property binding to bind expression to value property of the input element. In this demo, we are binding name variable expression to value property.
- Event binding to emit input event on the input element. Yes, there is an input event which will be fired whenever user will input to the input element. Using event binding, input event would be bind to an expression.
So, using the property binding and the event binding, two-way data binding can be achieved as shown in the listing below:
Same like ngModel directive demo in this demo also, when typing into the input element, the input element’s value will be assigned to name variable and also it would be displayed back to the view.
So we are implementing two-way data binding without using ngModel using the code shown in the below image:
Let us understand few important things here:
- [value]=”name” is the property binding. We are binding value property of the input element with variable (or expression) name.
- (input)= “expression” is event binding. Whenever input event will be fired expression will be executed.
- “name=$event.target.value” is an expression which assigns entered value to name variable.
- Name variable can be accessed inside AppComponent class.
So far we have seen two-way data binding using ngModel and without ngModel. We can conclude that the directive ngModel is nothing but combination of property binding and event binding. Event binding is denoted using small bracket and property binding is denoted using square [] bracket, and if you notice syntax of ngModel is [(ngModel)], which is like a banana put into a box suggests it is combination of both event and property binding.
