Property binding in Angular 2

Suggested Videos
Part 6 - Angular 2 nested components | Text | Slides
Part 7 - Styling angular 2 components | Text | Slides
Part 8 - Angular interpolation | Text | Slides

In this video we will discuss Property binding in Angular with examples. 

In Part 8, we discussed 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 video 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'/>



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}}' />

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>

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
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.
Hello alert("Hacked"); World