Angular 7 String Interpolation

To display dynamic data at the user end on the HTML template, the Angular 7 String interpolation is used. Using Angular 7 String interpolation, the changes can be made on component.ts file and the data can be fetched from there to HTML template i.e, component.html file.

Example:

component.ts file:

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

component.html file:

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

Output:

Explanation:

In the above example, both the serverID and serverStatus are specified with some values.

Similarities b/w String Interpolation and Property Binding:

Example:

String Interpolation:

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `  
                <h2>{{ Name }}</h2>  
              `  
})  
export class AppComponent {  
    Name: string = 'Tom Smith';  
}

Explanation:

In the above example, the value of the Name property is taken by the Angular from the component. It is then inserted between the opening and closing tags of the <h2> element using the curly braces used to specify interpolation.

Property Binding:

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `  
                <h2 [innerHtml]='Name'></h2>  
              `  
})  
export class AppComponent {  
     Name: string = 'Tom Smith';  
}

Explanation:

In the above example, the Angular pulls the value from Name property from the component. It is then inserted using the HTML property innerHtml of the <h2> element. The output is however the same as that in the string interpolation.

Difference between String interpolation and Property Binding:

• String Interpolation is a distinctive syntax.
• String Interpolation is turned to property binding by Angular.
• String Interpolation is a suitable alternative to property binding.
• String Interpolation must be utilized alternatively of property binding when the string concatenation is required.

Example:

@Component({  
    selector: 'my-app',  
    template: `<div>  
                    <h1>{{Example}}</h1>  
                </div>`  
})  
export class AppComponent {  
    Example: string = 'Hello World!';  
 
}

Property Binding must be utilized to set an element property to a non-string data value.

Example:

Property Binding:

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

Explanation:

In the above example, we are using property binding instead of string interpolation. Here, the button is disabled by binding it to isDisabled, which is a Boolean property.

String Interpolation:

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

Explanation:

In the above example, we are using string interpolation instead of property binding. Here, whether the value of the isDisabled class property is true or false, the button will remain disabled always.