String Interpolation in Angular 8
String interpolation is a one-way data-binding technique which is used to output the data from a typescript code to HTML template. It uses the template expression. It uses the template expression in double curly braces {{ }} to display the data from component to view.
String interpolation adds the value of the property from the component. It allows the user to bind the value to a UI element.
Interpolation binds the data one-way.
Syntax:
|
1 2 3 |
{{data}} |
We have firstly created an Angular project using Angular CLI.
The syntax of binding a field using double curly braces is called Binding Expression.
String interpolation uses template expressions in double curly {{ }} braces to display data from the component, the syntax {{ }}, also known as moustache syntax. The {{ }} contains a javascript expression which can be run by angular, and the output will be inserted into the HTML.
If we put {{5+5}} in the template ten will be inserted into the HTML.
Open the file app.component.ts and use the following code within the file:
|
1 2 3 4 5 6 7 8 9 10 11 |
import {Component} from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl:’./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent { title=’string interpolation in tutorialandexample’; } |
Now, open app.component.html file in the project and use the following code to see String Interpolation.
|
1 2 3 4 5 |
<h2> {{ title}} </h2> |
Now, open Node.js command prompt and run the ng serve –open to open the localhost: 4200 to see the output of the program.
String interpolation can be used to solve some other expression too. Let’s see another example.
Example:
Update the app.component.ts file with the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Data binding example using String Interpolation'; numberA: number = 10; numberB: number = 20; } |
app.component.html:
|
1 2 3 |
<h2>Calculation is : {{ numberA + numberB }}</h2> |
Output:
We can use the same application in another way also.
app.component.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Data binding example using String Interpolation'; numberA: number = 10; numberB: number = 20; addTwoNumbers() { return this.numberA + this.numberB; } } |
app.component.html:
|
1 2 3 |
<h2>Calculation is : {{ numberA + numberB }}</h2> |
Output:
