What is Interpolation in Angular 2?

What is Interpolation in Angular 2?

Interpolation is all about data binding. The  easiest way of show dynamic data to view. In Just need to pass property name enclosed within open close curly braes i.e. { { property  }}.

Interpolation are three types –

NoBindingDetails
1One way data bindingFrom Component class to View template
2One way data bindingFrom View Template to Component Class
3Two way data bindingBoth way

Let’s describe it with an example –

import {Component} from “@angular/core”;
@Component({
selector:”kris-app1″,
template: `<div>
<H1>{{pageHeader}}</H1>
<my-students></my-students>
</div>`
})
export class AppComponent{
pageHeader: string = “Student Details”;
}

app.component.ts

In above screenshot class property pageHeader is placed inside of double curly brasses, this is Interpolation and the expression is called template expression. In this example we learned one way binding i.e. moving data from component class property to HTML element property.

Class method call is possible in interpolation. See below code and screenshot –

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

@Component({
selector:”kris-app1″,
template: `<div>
<H1>{{getAddress()}}</H1>
<my-students></my-students>
</div>`
})

export class AppComponent{
pageHeader: string = “Student Details”;

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

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

}

app.coponent.ts

Leave a Reply

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