Angular Interpolation

1. What is Angular Interpolation?

Angular interpolation is used display a component property in the respective view template with double curly braces syntax. We can display all kind of properties data into view e.g. string, number, date, arrays, list or map.

Data binding consist of one way data binding and two way data binding. Interpolation is used for one way data binding. Interpolation moves data in one direction from our components to HTML elements.

2. Angular Interpolation Syntax

The property name to be displayed in the view template should enclosed in double curly braces also known as moustache syntax. i.e.

class AppComponent 
{
    propertyName: string;
    object: DomainObject;
}

{{ propertyName }}

{{ object.propertyName }}

Angular automatically pulls the value of the propertyName and object.propertyName from the component and inserts those values into the browser. Angular updates the display when these properties change.

3. Angular Interpolation Usages

1. Display simple properties – Interpolation can be used to display and evaluate strings into the text between HTML element tags and within attribute assignments.

   <h1>Greetings {{ name }}! </h1>
   
   <h4><img src="{{ backgroundImgUrl }}" style="height:40px"></h4>
   

2. Evaluate arithmetic expressions – Another usage of interpolation is to evaluate arithmetic expressions present within the curly braces.

   <h6>{{3 + 5}}</h6>   //outputs 8 on HTML browser
   

3. Invoke methods and display return values – We can also invoke/call methods on hosting component views within interpolation expressions.

   import { Component, OnInit } from '@angular/core';
   
   @Component({
   selector: 'app-greet',
   template: `
       <h1>Greetings {{ name }}! </h1>
       <h2>Have a good {{ getTime() }}!</h2>
   `,
   styleUrls: ['./greet.component.css']
   })
   export class GreetComponent implements OnInit {
   
   name: string = "John Doe";
   
   getTime(): string {
       return 'morning';
   }
   
   }
   

4. Display array items – We can use interpolation along with ngFor directive to display an array of items.

   export class DomainObject 
   {
     constructor(public id: number, public name: string) {
       //code
     }
   }
   

   import { DomainObject } from './domain';
    
   @Component({
     selector: 'app-root',
     template: `
     <h1>{{title}}</h1>
     <h2>The name is : {{domainObjectItem.name}}</h2>
     <p>Data Items:</p>
     <ul>
       <li *ngFor="let d of domainObjects">
         {{ d.name }}
         </li>
     </ul>
   `
   })
   export class AppComponent 
   {
     title = 'App Title';
   
     domainObjects = [
       new DomainObject(1, 'A'),
       new DomainObject(2, 'B'),
       new DomainObject(3, 'C'),
       new DomainObject(4, 'D')
     ];
   
     domainObjectItem = this.domainObjects[0];
   }
   

Either we use inline template or separate HTML file for component view, the template data bindings have the same access to the component’s properties.

4. Angular Interpolation Example

Let’s create a new component using @angular/cli by following command.

//with inline template using '-it' flag

ng generate component greet -it

Above command will generate ‘greet.component.ts‘ with inline template. Let’s add properties name and time to the greet component like shown below:

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

@Component({
selector: 'app-greet',
template: `
<h1>Greetings {{name}}! </h1>
<h2>Have a good {{time}}!</h2>
`,
styleUrls: ['./greet.component.css']
})
export class GreetComponent implements OnInit {

name: string = "John Doe";
time: string = "morning";

}

Angular automatically pulls the value of the name and time properties from the ‘greet’ component and inserts those values into the browser. Angular updates the display when these properties change.

5. Difference between Interpolation and Property Binding

Interpolation is a special syntax that Angular converts into property binding (pair of square bracket). It’s a convenient alternative to property binding.

Another major difference is that to set an element property to a non-string data value, we must use property binding.

In this example, OK button will be disabled or enabled based on the value of 'isDisabled'. on the other side, Cancel button will always be disabled irrespective of the property value.

export class AppComponent {
    isDisabled: boolean = true;
}

<button [disabled]='isDisabled'>OK</button>             //Data binding

<button disabled='{{isDisabled}}'>Cancel</button>       //Interpolation

Happy Learning!!