Interpolation In Angular

The Code Points May 24, 2022 0

In this article, we learn about interpolation in Angular using examples. To link a component attribute, method, or template reference variable to a string literal in the view, we use interpolation. This is also known as string interpolation. As the data flows from the component to the view, there is only one way from component to view.

What is Angular Interpolation?

We can use interpolation to incorporate expressions as part of any string literal in our HTML. The expressions are evaluated into a string, which is then replaced in the original string and the view is updated. Interpolation is available anywhere a string literal is used in the view.

String interpolation is another name for angular interpolation. Because you use expressions within another string.

Syntax for interpolation:

The interpolation is indicated by the {{}} (double curly brackets) in the Angular template. The syntax is as follows:

{{ templateExpression }}

Template Expression is the content inside the double brackets.

The Template Expression is first evaluated and converted into a string by Angular. The result is then substituted for Template expression in the original HTML string. Angular updates the original string whenever the template expression changes.

Example of Interpolation:

Using the following command, create a new angular application. if you new in angular the follow are article, how to create new project in angular.

ng new angular-interpolation

Now, open the app.component.html file and add the following code.

{{title}}

Now, open the app.component.ts file and add the following code.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Interpolation Example';
}

The title in the example above is the Template Expression. The component also has a title property. Angular examines title and replaces it with the value of the component class's title attribute.

If the user modifies the component class's title, Angular automatically updates the view.

for example, Interpolation is far more powerful than simply obtaining the component's property. It can be used to call any method on the component class or do mathematical calculations.

Notes

Interpolation is one-way binding

Values from the component to the template are interpolated in one direction. Angular changes the view when the component values change. However, if the values in the view components change, they are not updated.

The application state should not be changed

The application state should not be changed by the Template expression. It is used by Angular to read the component's values and populate the view. The rendered view would be inconsistent with the model if the Template expression changed the component values.

It means you can't be able to use the following:

• Assignments (=, +=, -=, …)
• Keywords like new, typeof, instanceof, etc
• Chaining expressions with ; or ,
• The increment and decrement operators ++ and --
• bitwise operators such as | and &

The outcome of the expression must be a string

The outcome of an interpolation expression must be a string. It will not work if we return an object. Property Binding is the ideal solution if you wish to bind an expression that isn't a string (for example, boolean).

Examples of Interpolation :

Invoke one of the component's methods

Interpolation can be used to call the component's methods.

//Template
 
{{getTitle()}}
 
 
//Component
title = 'Angular Interpolation Example';
getTitle(): string {
     return this.title;
 }

Concatenate two string

Welcome to {{title}}
{{ 'Hello & Welcome to '+ ' Angular Interpolation '}}
Welcome {{firstName}}, {{lastName}}
Welcome {{getFirstName()}}, {{getLastName()}}

Perform arithmetic operations

100x80 = {{100*80}}
Largest: {{max(100, 200)}}
 
//Component
max(first: number, second: number): number {
  return Math.max(first, second);
}

Bind to a property of an element

It can be used to bind to an HTML element's property, a component, or a directive. We bind to the style.color property of the <p> element in the following code. Any property that takes a string can be bound to.

<p>Show me <span class = "{{giveMeRed}}">red</span></p>
<p style.color={{giveMeRed}}>This is red</p>

Bind image source

<img src="{{itemImageUrl}}">

Bind href

<a href="/product/{{productID}}">{{productName}}</a>

Use Pipes

To alter the expression result, you can use Angular Pipes. Converting to uppercase, date formats, currency symbols, and so on

<p>uppercase pipe: {{title | uppercase}}</p>
<p>pipe chain: {{title | uppercase | lowercase}}</p>
<p>json pipe: {{items | json}}</p>

Conclusion

Interpolation is a basic but powerful feature in Angular. It allows us to insert expressions in the string literal, allowing us to dynamically generate the string literal using component class values.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.