What is Data Binding(Interpolation, Property Binding, Event Binding) in Angular?
Data binding is a technique that binds data from view(User or Front-end) with component(Logic Block or back-end). Means how data flow from user input and what data comes when user perform some action.
Data-binding play an important role in any Angular App, especially two way data binding, but Angular 2 doesn’t have built-in two-way data binding as it was present in Angular JS or Angular 1 version. With the help of ngModel we can achieve two way data binding in our application.
There are three types of data bindings in Angular 2, they are as follows:
- Interpolation
- Property Binding
- Event Binding
Let’s understand them one by one with the following code example.
1 2 3 4 5 6 7 8 9 10 11 12 |
export class DataBindingComponent implements OnInit { title: string = 'Welcome to W3REIGN !!'; listCount: number = 10; btnText: string = 'Add Item in to list'; constructor() { } ngOnInit() { } } |
1. Interpolation or String Interpolation:
String Interpolation is used to access or can say communicate properties likes variables, objects, arrays, etc in to the template, that are declared in component class.
To use template class veritable or any array you need to pass them in {{ propertyName }}.
1 2 3 |
<h2>{{ title }}</h2> <p>Items in your list ({{ number }})</p> |
When you run your application, you will see the proper values of this variables on view on browses.
2. Property Binding:
Property binding is used when we want to add or bind our component class properties to HTML Tag Attributes properties. Means changes in variable values in component class will directly bind with your view HTML Tags Attributes. Property binding in Angular is one-way or unidirectional data flow, in that communication goes from the component class to the view template .
In our above example add and button and lets bind its Value with component variable btnText.
1 2 3 4 5 6 7 |
<h1 [innerText]="title"></h1> <p>Items in your list ({{ number }})</p> <input type="submit" class="btn" [value]="btnText"> /* or */ <input type="submit" class="btn" bind-value="btnText"> |
There are 3 ways to define a property binding in Angular.
- Using interpolation {{ … }}
- Using square brackets []
- Using bind- Keyword
Like this:
1 2 3 |
<img src="{{ Logo }}"> <img [src]="Logo"> <img bind-src="Logo"> |
3. Event Binding:
In any Application user interacts with view elements like form elements, hovering or click on links and buttons. It’s sometimes necessary to get user input or action to perform certain action. All action are all events that may need to bind with component logic within Angular.
That’s what Angular Event binding is all about. It’s one-way data binding same as property binding, but data flow is in opposite direction. Event binding sends information or data from the view to the component class. This is just opposite from property binding, where data is sent from the component class to the view.
There are 2 ways to define a event binding in Angular.
- wrapping the event in (parenthesis)
- by prefixing it with on- Keyword
Now in our previous example let’s add and event on input text and button
Event Binding Example:
Template:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- To Show all list Items --> <h1>{{title}}</h1> Total items Count in list is {{listCount}} <p *ngFor="let item of listItems"> {{ item }} </p> <hr> <input type="text" [value] = "values" (keyup)="onKey($event)"> <input type="button" class="btn" [value]="btnText" (click)="addItem()"> |
Component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
title: string = 'Welcome to W3REIGN !!'; listCount: number = 0; btnText: string = 'Add Item in to list'; listItems= []; values = ''; onKey(event: any) { this.values = event.target.value; // Gating Input value on key up event. } addItem() { this.listItems.push(this.values); // Adding Item in Array from User Input. this.values = ''; // After Adding to array Text input Should be empty. this.listCount= this.listItems.length; // Update the counter Value. } |
Now when we type in input, it’s value will update in component, because we have used property binding on value property. On Clicking on button the same value will update on listItems Array.
The same we can achieve using two way binding, But in angular 2 and onward version there is not any concept of two way binding. In Angular 2 and greater version ngModel is used for two way binding.