Interpolation Vs Property Binding in Angular2

My last post was about, how to run angular2 application using F5 or CTRL F5 from visual studio, if you have not seen it, try and check it out.

As a developer one of the challenges we face when writing an application is which method should I use to achieve the aim or purpose of a piece in your application.

The motivation behind this article is to give a clearer picture when it comes to usage of one over another, in terms of Similarities, Difference and most importantly Security and the output you get.

To start with, we must understand what data binding is all about in Angular 2.

Data Binding

Data binding help us coordinate communication between a component and its view template. Data binding consist of One-Way Data-Binding and Two-Way Data-Binding

Interpolation is all about data binding and so as property binding as the name justify, but they both flow a value in one direction. it’s all about moving data in one direction from our components to HTML elements.

Similarities between Interpolation and Property Binding.

Interpolation

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

@Component({
    selector: 'my-app',
    template: `
                <h1>{{ fullName }}</h1>
              `
})
export class AppComponent {
    fullName: string = 'Martin Luther King Jr';
}

From the example above, Angular pulls the value of the fullName property from the component and inserts it between the opening and closing <h1> element using curly braces used to denote interpolation.

Property Binding

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

@Component({
    selector: 'my-app',
    template: `
                <h1 [innerHtml]='fullName'></h1>
              `
})
export class AppComponent {
    fullName: string = 'Martin Luther King Jr';
}

From the exapmle above, Angular pulls the value from fullName property from the component and inserts it using the html property innerHtml of <h1> element.

Interpolation

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

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                    <img src='{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation';
    imagePath: string = 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png';
}

Property Binding

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

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1 [innerHtml]=’citedExample’></h1>
                    <img [src]='imagePath'/>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation';
    imagePath: string = 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png';
}

Both examples cited above for Interppolation and Property binding will produce same results.

Let start by understanding difference between the two since we have seen how the two can be used to achieve same results.

Difference between Interpolation and Property Binding.

Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding.

Let’s make the difference clear with an example: In the example below when we need to concatenate strings we have to use interpolation instead property binding.

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

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                    <img src=' https://angular.io/{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation';
    imagePath: string = 'assets/images/logos/angular/logo-nav@2x.png';
}

Property Binding: to set an element property to a non-string data value, you must use property binding.

In the example below, we are disabling a button by binding to the Boolean property isDisabled.

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

@Component({
    selector: 'my-app',
    template: `<div>
    <button [disabled]='isDisabled'>Try Me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

If we decide to use interpolation instead of property binding, the button will always be disabled irrespective of isDisabled class property value is true of false.

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

@Component({
    selector: 'my-app',
    template: `<div>
    <button disabled='{{isDisabled}}'>Try Me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

One other thing I want to introduce is, instead of using pair of square bracket to depict property binding you can also use the canonical form which is an alternate syntax to square bracket.

<button bind-disabled='isDisabled'>Try Me</button>

What to be used either pair of sqaure bracket or canonical form is based on preference.

Security

Similarities based on security: looking at both data binding technique from the angle of security, both interpolation and property binding protects us from malicious content, thanks to angular data binding that sanitizes malicious content before displaying it on the browser.

Interpolation

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

@Component({
    selector: 'my-app',
    template: '<div>{{hacked}</div>'
})
export class AppComponent {
    hacked: string = 'Hello <script>alert("You are just been Hacked or not");</script> first binding.';
}

Output: Hello <script>alert("You are just been Hacked or not");</script> first binding.

**Property Binding **

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

@Component({
    selector: 'my-app',
    template: '<div [innerHtml]="badHtml"></div>'
})
export class AppComponent {
    hacked: string = 'Hello <script>alert("You are just been Hacked or not");</script> first binding.';
}

Output: Hello alert("You are just been Hacked or not"); first binding.

Both Interpolation and Property Binding sanitizes the malicious content slightly differently, but protect us from malicious content by rendering it harmlessly.

I hope this will be a guide when writing your next code.

Thanks.