Angular interpolation is a way of displaying a component property within the separate view template with double curly braces syntax.

Examples like String, number, date, arrays, list, or map.

Data binding includes one-way data binding and two-way data binding. Interpolation is used for one-way data binding. It moves the data between one component to HTML tags. Angular interpolation is additionally known by the name “string interpolation” because you incorporate expressions inside another string.

 

Angular Interpolation Syntax –

 

The property name to be displayed within the view template should enclose in double curly braces which are also called mustache syntax.

Example:

Welcome in {{name}}

[app.component.html]

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name="angular"
}

[app.component.ts]

Angular automatically drags the value of the propertyName from the component and inserts certain values into the browser.

In the above example, the content inside the double braces is also called Template Expression.

The angular first estimates the Template Expression and transfers it into a string. Then it restores Template Expression with the result in the original string within the HTML.

Whenever the template expression changes, the angular reforms the original string again.

Output is “welcome in angular”.

Interpolation is one process as values go from the component to the template.

When the component values replace, the angular updates the view. But if the values change in the view components aren’t updated.

The template expression must not change the position of the application.

The angular utilizes it to read the values from the component and occupy with the view.

If the template expression changes the component values, then the provided view would be incompatible with the model.

It implies that you cannot make use of the following:

Assignments (=,+=,-=…,)

Keywords like new, etc.

Chaining expressions with ; , ,

The increment operator is ++ and the decrement operator is -- Bitwise operators like | and &.

1.Display Simple Properties -

Interpolation is used to display and evaluate strings into the text between HTML element tags and within attribute assignments.

Example:

Greetings {{ name }}!

[app.component.html]

2.Evaluate Arithmetic Expressions -

Another thing of interpolation is to evaluate arithmetic expressions available within the curly braces.

Example:

 {{3 + 5}}

[app.component.html]

Output is 8.

Expressions can also invoke methods of host component such as getVal() in the following example.

 The sum of 3 + 5 is not {{3 + 5 + getVal()}}.

[app.component.html]

With interpolation, angular performs the following tasks:

Evaluates all expressions in double curly braces.

Converts the expression results in strings.

Links the results to any adjacent literal strings.

Sets the composite to an element or directive property.

3.Invoke methods and display return values -

We can also call methods on arranging component views within interpolation expressions.

                                           Greetings {{ name }}!
                                            Have a good {{ getTime() }}!

[app.component.html]

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name: string = "John Doe";
 
getTime(): string {
    return 'morning'
}
}

[app.component.ts]

4. Display Array Items -

We can use interpolation with ngFor directive to display an array of items.

 

export class data{
    constructor(
        public id: number,
        public name: string
    ){}
}

 

[data.ts]

                                            {{title}}
                                            The name is : {{data.name}}
                                            Data Items:  {{ d.name }}      

[app.component.html]

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  datas=[
    new data(1,'abc'),
    new data(2,'def'),
    new data(3,'ghi'),
    new data(4,'mno'),
];
  dataitem=this.datas[0];
}

[app.component.ts]

Interpolation is a unique syntax that angular turns into property binding(set of square brackets).

It’s a convenient alternative to property binding.

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

String interpolation and property binding both are about one-way data binding.

They both pass a value in one direction from components to HTML elements.

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `{{ name }}`})   
export class AppComponent
 {       
name: string = 'Abcd Efgh';   
}                  

[app.component.ts]

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

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: ` `   }) 
export class AppComponent
{    name: string = 'ABC DEF';   }    
                

[app.component.ts]

In property binding, see how angular pull the value from name property from the component and inserts it using the HTML property innerHTML of element.

Let’s see another example of string interpolation and property binding

String interpolation is a special syntax that is converted to property binding by angular.

When you require to concatenate strings, you must use interpolation rather than property binding.

@Component({  
  selector: 'my-app',  
  template: `{{cityDetail}}`})
  export class AppComponent 
   {     
cityDetail: string = 'The city is Ahemdabad';
   }  

[app.component.ts]

 

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

Example:

Disable

[app.component.html]

 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isDisabled: boolean = true;  
}  

[app.component.ts]

 

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

Disable      

[app.component.html]

 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isDisabled: boolean = true/false;  
}

[app.component.ts]