Angular - Text interpolation

---

---

Text interpolation is the process of using data of Angular component in its corresponding template using the template expression. It is used just to display a piece of information in HTML, such as displaying a title or name.

The component is a building block of an Angular application. It consists of a TypeScript class, an HTML template, and CSS styles. The template expression is a piece of code written within double curly braces {{ }} in the Template.

How to use Text Interpolation?

As discussed earlier, we write the template expression inside double curly braces to use Text Interpolation. It is shown below for the reference −

{{ <template expression> }}

Let us consider that a component has name as one of its property.

export class HomeComponent {
   name: string = 'John'
}

Now, name can be used in it's template as shown below −

Hello {{ name }}

Understanding Template Expression

Template expressions are same as that of JavaScript expression excluding two set of expression:

• Expression with no usage in the template (assignement, object creation, etc.,)

• Expressions with side effects

For example, the increment operator (++) basically increment the given variable and then returns the incremented value. This is called side effect. Since the increment operator produces the side effect, it is not allowed in the template expression.

Some of the JavaScript expressions not allowed in the template expression. They are given below:

• Assignment operators: Template does not have the concept of creating a new variable and setting value for it in the context of template.

• new keyword: Template does not allow the creation of new object. Any object should be created in the component class. Object created in the component will be available in the template.

• typeof and instanceOf keyword: Template does not allow interpretation of the object in the template. Logic should be done in the component through public method and should exposed to the template.

• Chaining expressions: Template expression allows only a single expression and so, all chaining operators are excluded.

• increment and decrement operators: Template does not allow side effects. Since the increment and decrement operator does side effects, they are excluded.

• Bitwise operator: Pipe symbol (|) is used to represent the angular pipe concept. Angular pipes are used for text transformation.

As template will render many times during the lifetime of the application, angular team recommends the expression to be short, quick and have no side effects.

Template Expression Context

Template expression has three context −

1. Component's property: Components property are the property set in the components instance. For example, a user object (user) in the component can be used in the template as follows,

{{ user.name }}

Here, user context is component's instance.

2. Template input variable: Template input variable are input to the template assigned through directives. For example, ngFor directive send the index and current item of the loop to the template as shown below,

<ul>
   <li *ngFor="let user of users">{{user.name}}</li>
</ul>

Here, user context is template input variable.

3. Template reference variable: Template reference variable is basically representation of HTML elements, components and directive in the give template as shown below −

<input #user /> <span>{{ user.value }}</span>

Here, user context is template reference variable.

The precedence of context in case of name collision is as follow,

• Template variable
• Variable in the directive's context
• Component's member variable

Working Example

Now, let's see a practical example of Text Interpolation in Angular.

Step 1: Create a new application using angular CLI as shown below −

$ ng new my-app

Step 2: Create a component, Hello using angular CLI as shown below −

$ ng generate component Hello
CREATE src/app/hello/hello.component.css (0 bytes)
CREATE src/app/hello/hello.component.html (20 bytes)
CREATE src/app/hello/hello.component.spec.ts (552 bytes)
CREATE src/app/hello/hello.component.ts (198 bytes)

Step 3: Next, open the component file, hello.component.ts and add a variable named user with value John.

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

@Component({
   selector: 'app-hello',
   templateUrl: './hello.component.html',
   styleUrls: ['./hello.component.css']
})
export class HelloComponent {
   user: string = "John"
}

Step 4: Next, open the component template file, hello.component.html and add an input element:

<h1> Hello, {{ user }} </h1>

Here, user is the template input variable exposed by component.

Step 5: Next, open the app component's template file, src/app/app.component.html and add our component as shown below −

<app-hello />

Step 6: Finally, run the application and check whether the output is correct.

Summary

Text interpolation is easy to learn as it uses the JavaScript expression. Since, the text interpolation does not allow script tag and allows only expression with no side effect, the text interpolation will help to create safe and secure web application