What is Property Binding in Angular 2?

Property Binding in Angular 2

Here we enclose the property element name with square bracket or after ‘bind-‘  word and class property should be enclosed inside double single course. Let check it using an example. Here we are showing google.com logo in our demo page.

 

import {Component} from “@angular/core”;

@Component({
selector:”kris-app1″,
template: `<div>
<H1>{{getAddress()}}</H1>
<img [src]=’imageLocation’/>
<my-students></my-students>
</div>`
})

export class AppComponent{
pageHeader: string = “Student Details”;
imageLocation:string = “https://www.google.com/logos/doodles/2016/user-birthday-5656109189693440-lawcta.gif”

roadName:string = “Rajarhat Road”;
pin:string = “700135”;

getAddress() : string{
return this.roadName + ‘; ‘ + this.pin;
}

}

app.component.ts

The output of the above code will be –

Output

interpolation and property binding  both can be used for one way data binding. Then obvious question come in our mind that what is the difference between interpolation and property binding?

Interpolation is angular special wrapper but internally it convert to property binding but for some cases we must use interpolation instead of property binding and vise-versa. Let’s try it by an example.

Take 1st case (interpolation instead of property binding) –

import {Component} from “@angular/core”;

@Component({
selector:”kris-app1″,
template: `<div>
<H1>{{getAddress()}}</H1>
<img src=’https://www.google.com/{{imageLocation}}’/>
<my-students></my-students>
</div>`
})

export class AppComponent{
pageHeader: string = “Student Details”;
imageLocation:string = “/logos/doodles/2016/user-birthday-5656109189693440-lawcta.gif”

roadName:string = “Rajarhat Road”;
pin:string = “700135”;

getAddress() : string{
return this.roadName + ‘; ‘ + this.pin;
}

In this example we put the dynamic path of the image in imageLocation variable and put the hardcoded domain path in HTML src element .

Dynamic path of the image

Take 2nd case (property binding instead of interpolation) –

When an HTML element property need to set non-string data value (like true, false,3 etc), you must use property binding. See below example. In this example we are enable and disable a button.

import {Component} from “@angular/core”;

@Component({
selector:”kris-app1″,
template: `<div>
<H1>{{getAddress()}}</H1>
<img src=’https://www.google.com/{{imageLocation}}’/>
<my-students></my-students>
<button [disabled]=’isDisabled’>Submit</button>
</div>`
})

export class AppComponent{
pageHeader: string = “Student Details”;
imageLocation:string = “/logos/doodles/2016/user-birthday-5656109189693440-lawcta.gif”
isDisabled:boolean = false;

roadName:string = “Rajarhat Road”;
pin:string = “700135”;

getAddress() : string{
return this.roadName + ‘; ‘ + this.pin;
}

}
interpolation

Enabled/Disabled property will not working on interpolation. Let’s change the like below and try to check output in your browser ( your task 🙂 )

import {Component} from “@angular/core”;

@Component({
selector:”kris-app1″,
template: `<div>
<H1>{{getAddress()}}</H1>
<img src=’https://www.google.com/{{imageLocation}}’/>
<my-students></my-students>
<button disabled={{isDisabled}}>Submit</button>
</div>`
})

export class AppComponent{
pageHeader: string = “Student Details”;
imageLocation:string = “/logos/doodles/2016/user-birthday-5656109189693440-lawcta.gif”
isDisabled:boolean = true;

roadName:string = “Rajarhat Road”;
pin:string = “700135”;

getAddress() : string{
return this.roadName + ‘; ‘ + this.pin;
}
}

Address

Leave a Reply

Your email address will not be published. Required fields are marked *