Introduction
Databinding is the communication of dynamic data between view and model layer of your application. View represents template and model could be your business logic defined in the component. Databinding comprises of property and event binding. Components have templates and data is passed to the template in the form of static HTML code snippet. With databinding, you go one step further and pass dynamic data to the template. Your component could also listen to DOM events of your view and accordingly perform some action. There are different ways or approaches to databinding and we will see each of these in the following sections. Databinding can be achieved in any of the following ways:
- String Interpolation – expression resolving to a string
- Property Binding – binding data to the property of your HTML element
- Event Binding – binding event to your HTML element
- Two Way Databinding – binding both data and event through the use of ngModel
The article assumes you have AngularJs 2 installed and appropriately configured to run the application.
String Interpolation
It is expressed using {{}} curly brackets. Between these brackets you provide an expression that resolves or evaluates to a string. Let’s write the code that demonstrates string interpolation:
import { Component } from '@angular/core';
@Component({
selector: 'app-databinding',
templateUrl: './databinding.component.html',
styleUrls: ['./databinding.component.css']
})
export class DatabindingComponent {
private myName = "Rajeev";
constructor() { }
}The above Typescript class is a DataBindingComponent component class. This component simply contains a property named myName which holds the value as ‘Rajeev’. We want to display this value using string interpolation. The component has its own selector and a template file. The selector is a custom HTML element we will use to display the view rendered by this component. The template file databinding.component.html represents the view. It will have the following HTML code snippet:
<h1>
{{myName}}
</h1>As you can see, here we are using string interpolation to the display the value of myName property. The property name is passed to {{}} curly bracket which takes it as an expression and resolves to a string. It also means the value of property myName is passed as a data to the template or view dynamically by the framework. Rendering this component should display the name ‘Rajeev’
Property Binding
Let’s consider the same above component class. We will change the code in the template file databinding.component.html to demonstrate property binding:
<input type="text" value="Rajeev" />
The above code is fairly straightforward. It just displays the input field with the value hard coded as ‘Rajeev’. Nothing great about it. Now lets remove the hard coding and use property binding instead. To use property binding, we have to define the property in square [] brackets.
<input type="text" [value]="myName" />
The value attribute now has the enclosing square [] brackets. It means it is no longer a regular HTML attribute of the input element. But it is now a DOM value property which holds the value called ‘myName’. As you guessed it correctly, the expression inside the quotation mark is the property name we defined in our class component. It effectively means we bound the data or the value of the property ‘myName’ to the DOM value property. You should now see the value ‘Rajeev’ in the input field.
Event Binding
Let’s again change the template code in the databinding.component.html file to demonstrate event binding:
<button (click)="onClick()">Click Me</button>
The above code has a button element which has a native DOM click event enclosed with parentheses (). Upon clicking, it makes a call to the onClick() method. The onClick() method will be defined in our DataBindingComponent component class which will simply alert that it was clicked. Let’s change the code in our component to add the onClick() method.
import { Component } from '@angular/core';
@Component({
selector: 'app-databinding',
templateUrl: './databinding.component.html',
styleUrls: ['./databinding.component.css']
})
export class DatabindingComponent {
onClick() {
alert("I am clicked");
}
constructor() { }
}This way we achieved what is called as event binding with the native DOM event.
So far you have seen native DOM property and event binding. Going ahead with AngularJs 2 series, I will also demonstrate custom property and event binding in my next article.
Two Way DataBinding
Two way databinding seemed to be very popular at least with Angular 1.x but its not the case now. Its actually a bit performance overhead in using two way databinding and certainly not recommended unless there is a real need for it. But you can still have two way databinding if you love this feature. Let’s tweak our original DataBindingComponent component class.
import { Component } from '@angular/core';
@Component({
selector: 'app-databinding',
templateUrl: './databinding.component.html',
styleUrls: ['./databinding.component.css']
})
export class DatabindingComponent {
item = {
name: "iPhone",
qty: 100,
amount: "$200"
}
constructor() { }
}As you can see from the above code, we will create an Item object property that will have item name, quantity and amount. Now we will change the template file databinding.component.html to incorporate two input elements. Lets look at the code:
<input type="text" [(ngModel)]="item.name" /> <br> <input type="text" [(ngModel)]="item.name" />
We have two input elements defined so that we can demonstrate the two way databinding feature. Each input element has a ngModel property enclosed with parentheses () and square brackets []. It means ngModel will act both as a property and event binding attribute. We will assign item.name model object property as a value. If you run the app, you will see changes made in one input field is reflected in another and vice versa. This is because changes to view is triggered as an event and the model object which is our component is updated and the moment it is updated it simultaneously reflected on the view. This is all with the magic of ngModel property.
| Reference: | AngularJs 2 Series: Binding The Data With DataBinding from our WCG partner Rajeev Hathi at the TECH ORGAN blog. |
