Data Binding In angular

 DataBinding is a core concept in Angular  that allows communication between component and DOM element. There are four types of DataBinding .They are different in data following process.They are given below :

 

From the Component to the DOM

Interpolation: Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property. For ex.

{{title}}

This evaluates the title property of the component and display value of its in html page.

Property binding: Property and attribute are not same ,There are some differences ,they are given below:

Attribute	Property
HTML	DOM
Attribute value cannot change once they are initialized	Property values however can change.

We can clear understand the differences between attribute and property by following example.

Property binding:

<input type="text" id="sid" value="Shahanaj" />

Write following command in console of developer tools (press f12 in browser)

$("#sid").getAttribute('value')

Rertieve value: "Shahanaj"

$("#sid").value

Rertieve value:  "Shahanaj"

After changing value in textbox from "Shahanaj" to  :  "Shahanaj Begum"

Execute this code again in console

$("#sid").value

Rertieve value:  "Shahanaj Begum"

$("#sid").getAttribute('value')

Rertieve value: "Shahanaj" [Changed value can’t retrieve,that means attribute can’t changed after initialization]

With property binding, we can pass value from the component to the specified property, which can often be a simple html attribute. For property binding [ ] is used. [ ] this contain html attribute name and its value will be passed from component, such as

<input type="text" value="Shahanaj" [disabled]="isDisabled"  />

 

In this example,  the value of [disabled] property depends on isDisabled. isDisabled ‘s value define in component.For ex.

 

public isDisabled:boolean

this.isDisabled = false;

From the DOM to the Component

Event binding: When a specific event (eg: click,change,keyup,mousemove etc) occurred in DOM and perform some action is known as Event binding.

We can assign evnthandler or template statement in an event. To bind an event Parenthesis () is used. Inside parenthesis event name placed. For ex.

<input type="button" (click)="SomeAction()" value="Get"   />

{{someAction}}

 

Component:

  SomeAction (){

    this.someAction= "Clicked event fired";

  }

Output:

 

 

In this example ,we assign an event handler which is nothing but a method .which this event occurred its display output in browser.

To get event details

<button (click)="Someevent($event)" >Get event</button>

Method in TS file

Someevent (e){

    this.someAction= e.type;

    console.log(e)

  }

Output in browser

 

 

Template assignment

<input type="button" (click)="action='template displayed'" value="Get"   />

{{action}}

 When clicked it will display

template displayed

Two-way

Two-way data binding: [(ngModel)]=“value”

Using what’s called the banana in a box [()] syntax, two-way data binding allows to have the data flow both ways.

<input type="text" [(ngModel)]="uname"  />

{{uname}}

 

In this example, the uname data property is used as the value for the input, but if the user changes the value, the component property gets updated automatically to the new value.

Back to Blogs