Angular 7 String Interpolation

In Angular, String interpolation is used to display dynamic data on HTML template (at user end). It facilitates you to make changes on component.ts file and fetch data from there to HTML template (component.html file).

For example:

component.ts file:

import {Component} from '@angular/core';
@Component(
  {selector: 'app-server',
 templateUrl: 'server.component.html'})
export class ServerComponent {
  serverID: number = 10;
    serverStatus: string = 'Online';
}

Here, we have specified serverID and serverStatus with some values. Let's use this in "component.html" file.

component.html file:

<p>Server with ID {{serverID}} is {{serverStatus}}. </p>

Output:

String Interpolation vs Property Binding

String Interpolation and Property binding both are used for same purpose i.e. one-way databinding. But the problem is how to know which one is best suited for your application.

Here, we compare both in the terms of Similarities, Difference, Security and the output you receive.

Similarities b/w String Interpolation and Property Binding

String Interpolation and Property Binding doth are about one-way data binding. They both flow a value in one direction from our components to HTML elements.

String Interpolation

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
                <h1>{{ fullName }}</h1>
              `
})
export class AppComponent {
    fullName: string = 'Robert Junior';
}

You can see in the above example, Angular takes value of the fullName property from the component and inserts it between the opening and closing <h1> element using curly braces used to specify interpolation.

Property Binding

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
                <h1 [innerHtml]='fullName'></h1>
              `
})
export class AppComponent {
    fullName: string = 'Robert Junior';
}

In Property binding, see how Angular pulls the value from fullName property from the component and inserts it using the html property innerHtml of <h1> element.

Both examples for string interpolation and property binding will provide the same result.

Difference between String interpolation and Property Binding

String Interpolation is a special syntax which is converted to property binding by Angular. It's a convenient alternative to property binding.

When you need to concatenate strings, you must use interpolation instead of property binding.

Example:

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation foe string only';

}

Property Binding is used when you have to set an element property to a non-string data value.

Example:

In the following example, we disable a button by binding to the Boolean property isDisabled.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `<div>
    <button [disabled]='isDisabled'>Disable me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

If you use interpolation instead of property binding, the button will always be disabled regardless isDisabled class property value is true or false.

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