HI WELCOME TO Sirees

Angular interpolation

Leave a Comment


Interpolation is all about data binding. In Angular data-binding can be broadly classified into 3 categories
Data BindingDescription
One way data-bindingFrom Component to View Template
One way data-bindingFrom View Template to Component
Two way data-bindingFrom Component to View Template & From View template to Component



In this video, we will discuss the first one way data-binding i.e From Component to View Template. We achieve this using interpolation. We will discuss the rest of the 2 data-binding techniques in our upcoming videos.

One way data-binding - From Component to View Template : To display read-only data on a view template we use one-way data binding technique interpolation. With interpolation, we place the component property name in the view template, enclosed in double curly braces: {{propertyName}}.



In the following example, Angular pulls the value of the firstName property from the component and inserts it between the opening and closing <h1> element.


import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
                <h1>{{ firstName }}</h1>
              `
})
export class AppComponent {
    firstName: string = 'Tom';
}

Output : 
angular interpolation example

It is also possible to concatenate a hard-coded string with the property value
<h1>{{'Name = ' + firstName}}</h1>

The above expression displayes "Name = Tom" in the browser.

You can specify any valid expression in double curly braces. For example you can have 
<h1>{{ 10 + 20 + 30 }}</h1>

The above expression evaluates to 60

The expression that is enclosed in double curly braces is commonly called as Template Expression. This template expression can also be a ternary operator as shown in the example below. Since firstName property has a value 'Tom', we see it in the browser.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
                <h1>{{firstName ? firstName : 'No name specified'}}</h1>
              `
})
export class AppComponent {
    firstName: string = 'Tom';
}

If we set firstName = null as shown below. The value 'No name specified' is displayed in the browser
firstName: string = null;

You can also use interpolation to set <img> src as shown in the example below.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{pageHeader}}</h1>
                    <img src='{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    pageHeader: string = 'Employee Details';
    imagePath: string = 'http://kansiris.com/images/logo.jpg';
}

Output : 


We can also call class methods using interpolation as shown below.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{'Full Name = ' + getFullName()}}</h1>
                </div>`
})
export class AppComponent {
    firstName: string = 'Tom';
    lastName: string = 'Hopkins';

    getFullName(): string {
        return this.firstName + ' ' + this.lastName;
    }
}

Output : Full Name = Tom Hopkins

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.