4. Interpolation in Angular

Interpolation in Angular

Introduction

1. Interpolation is one type of binding where we can bind the data for display.
2. We can perform mathematical operations, conditional operations e.c.t. 
3. Interpolation always converts the result to string type before display or 
   before assigned.
4. Interpolation can also be used for element properties whose return type or 
  expected type is string type. 
   examples : type, placeholder e.c.t.
5. Interpolation can't be used for element properties whose return type or 
   expected type is other than string. 
   examples: required, readonly e.c.t
6. If we are trying to use interpolation for the element properties whose 
   return type or expected type is other than string , then we wont get any
    errors but result's with the default value of that particular property.

Examples

1. app.component.html
2. app.component.css
3. app.component.ts

In app.component.html 

<h1>Ways of using Interpolation</h1>

1. <h1>Displaying value : {{a}}</h1>

2. <h1> Arithmetic Operations : {{a + b}}</h1>

3. <h1> Conditional : {{ a > b ? 'true' : 'false'}}</h1>

4. <h1>Relational operations: {{ a > b}}</h1>

5. <h1>Interpolation as property binding</h1>
<input type="{{fieldType}}"/>

<h1>Interpolation which wont work for non-string type </h1> 
<input type="text" readonly="{{readonlyValue}}"> 

In app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  a = 10;
  b = 20;
  fieldType = 'password';
  readonlyValue = false;
}

Usage 

1. Interpolation can be used for display data on View from controller.
2. Interpolation can be used for performing arithmetic operations.
3. Interpolation can be used for performing any conditional operations.
4. Interpolation can be used for performing any relational operations.
5. Interpolation can be used on any string properties of DOM Elements.
6. Interpolation can not be used on any non string properties of DOM elements

Note 

Interpolation always convert into string before using or before displaying.