Angular 8 Session 8 - Interpolation In Angular

Interpolation In Angular

In every application DataBinding is a major concept and it has its own importance.

Data Binding are majorly classified into 2 categories.

 One-way data binding

 Two-way data binding

Interpolation is one of them to bind the data at one-way.

One-way describes about to flow data either from component-view or vice-versa where as Two-way tells about flow of data in both direction.

To have data bind to view we are enclosing the component objects/properties in pair of curly braces as shown below:

The main use of interpolation is to dynamically bind the data in a string expression.

Also interpolation helps to evaluate an expression and can be evaluate with a ternary operator.

Using interpolation we can also set attribute value as shown below.

It also can be used with method.

app.component.ts

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

@Component({

  selector: 'my-app',

  templateUrl: './app.component2.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular8Demo';

  myData = "angular";

  getChannelName(): string {

    return "SKMDotNet"

  };

}

app.component2.html

<div align="center">

    <h1>welcome to {{myData}} application</h1>

    <h1>{{'welcome to '+myData+' application'}}</h1>

    <h3>{{100+200}}</h3>

    <h1>{{myData?'welcome to '+myData+' application':'No data found'}}</h1>

    <h1>Welcome to {{myData}} Application by {{getChannelName()}}</h1>

</div>

<div>

    <input type="text" value="{{myData}}" />

</div>