documentation 2

Angular interpolation

we will discuss the concept of Interpolation in Angular. 

Interpolation is all about data binding. In Angular data-binding can be broadly classified into 3 categories

Data Binding	Description
One way data-binding	From Component to View Template
One way data-binding	From View Template to Component
Two way data-binding	From Component to View Template & From View template to Component

In this lecture, 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 lectures.

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> // by using interpolation we can display property value

              `

})

export class AppComponent {

    firstName: string = 'Tom';    //property assigned with value tom

}

Output :  
 

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
{{DATA ENCLOSED IN double curly BRACES IS CALLED TEMPLATE EXPRESSION}}
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://pragimtech.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 

########  interpolation=={{}}  ******************** property binding = [ ] ###################

#############  Property binding in Angular 2 ############################

we will discuss Property binding in Angular with examples.

In Part 8, we discussed  in previous lecture we can use interpolation to bind component class properties to view template. Another option to achieve exactly the same thing is by using Property binding.

In our previous Lecuture we have bound imagePath property of the component class to <img> element src property using interpolation as shown below.
<img src='{{imagePath}}'/> 

We can rerwrite the above example, using property binding as shown below. Notice the <img> element src property is in a pair of square brackets, and the component class property is in quotes.
<img [src]='imagePath'/> 

########  interpolation=={{}} only string *************** property binding = [ ]  str&boolean ###################

*************DIFFERENCE B/W INTERPOLATION& PROPERTY BINDING*******

Both Interpolation and Property binding flows a value in one direction, i.e from a component's data property into a target element property.

What is the difference between Interpolation and Property binding
Interpolation is a special syntax that Angular converts into a property binding. 

Interpolation is just a convenient alternative to property binding. 

In some cases like when we need to concatenate strings we have to use interpolation instead of property binding as shown in the example below.
<img src='http://www.pragimtech.com/{{imagePath}}' />\




*************DISABLING BUTTON USING PROPERTY BINDING********

When setting an element property to a non-string data value, you must use property binding. In the following example, we are disabling a button by binding to the boolean property isDisabled.
<button [disabled]='isDisabled'>Click me</button>

If we use interpolation instead of property binding, the button is always disabled irrespective of isDisabled class property value
<button disabled='{{isDisabled}}'>Click me</button>

Some important points to keep in mind when using Property binding

Remember to enclose the property name with a pair of square brackets. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string.
<span [innerHTML]='pageHeader'></span>

With Property binding we enclose the element property name in square brackets
<button [disabled]='isDisabled'>Click me</button>

We can also use the alternate syntax with bind- prefix. This is known as canonical form
<button bind-disabled='isDisabled'>Click me</button>

********************DATA BINDING PROVIDES SECURITY*********************

From security standpoint, Angular data binding sanitizes malicious content before displaying it on the browser. Both interpolation and property binding protects us from malicious content. 

In the example below we are using interpolation. Notice the malicious usage of <script> tag.

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

@Component({

    selector: 'my-app',

    template: '<div>{{badHtml}}</div>'

})

export class AppComponent {

    badHtml: string = 'Hello <script>alert("Hacked");</script> World';

}

Angular interpolation sanitizes the malicious content and displays the following in the browser
Malicious output  Interpolation= Hello <script>alert("Hacked");</script> World

In this example below we are using property binding. 
'<div [innerHtml]="badHtml"></div>'

Property binding sanitizes the malicious content slightly differently and we get the following output, but the important point to keep in mind is both the techniques protect us from malicious content and render the content harmlessly.
Malicious output property binding=  Hello alert("Hacked"); World