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>
