Overview Of Interpolation In Angular

Introduction

In this article, we are going to learn the use of interpolation. Generally, we display the static component from the inline HTML or from templateUrl. What if we want some of the things to change dynamically? Let us suppose we need to show the current username, and type of user -- then we will have to use interpolation. These dynamic values will come from any source through API or services.

Prerequisites

• HTML, CSS, and JS
• Basics of Typescript.

Let us create a sample TestApp. For this you have to install the following tools for the development environment:

1. Node
2. Npm (comes when you install node)
3. Angular CLI
4. Text Editor

For creating a new application run the below command on your location.

> ng new TestApp

Once your command is completed you will have TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp'.

Note
See my previous article “Getting started with Angular CLI.” If you want the installation and introduction from the basics,  start with the execution of the sample application.

Let us create a simple component.

Open the integrated terminal and run the below command.

> ng g c test

• g for generate
• c for component

The test is a component name.

 

Let us create a new property inside the class and let's call it a userName. Assign some value. Now, how do we get the newly added property value in HTML template? The source is double curly braces {{}} and inside the double curly braces, we specify the property. This method of specifying the property inside the double curly braces to represent the values is known as an interpolation in Angular. Interpolation simply means to evaluate the value inside the double curly braces string and display that value to the HTML page.

Open test.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
    userName = "Irshad";
    constructor() {}
    ngOnInit() {}
}

Add the desired property ‘userName’ that we will use in our HTML view.

Open test.component.html

<h1>
   Current User : {{userName}}
</h1>

Modify the content of the above file with the added property of that corresponding class property.

Run the application.

Ng serve

 

 

You can see the value that we have assigned in class. The property inside {{}} interprets the value and renders that value.

Let us see what interpolation can and cannot do:

• {{userName}} - it will display the value of name property defined inside the class.
• {{3+3}} - It will display 6 as output rendered HTML.
• {{"welcome" + userName}} - it will concatenate the welcome string to the property value.

Modify the test.component.html with the below content.

<h1>
    {{"Welcome" : userName}}
</h1>> <h2> 3 + 5 = {{3 + 5}}
</h2>

Run the application.

 

What we can not do,

{{a = 3+5}} - It will throw a template parse error. Bindings cannot contain assignment.

Modify the content of test.component.html

<h1>
    {{"Welcome" : userName}}
</h1>> <h2> 3 + 5 = {{3 + 5}}
</h2>
<h2>{{a = 3 + 9}}</h2>

Run the application,

No output, but an error

 

It can also not be able to access the global objects like 'window' in js. If you want to access then bind its value to some property inside the class and then bind that property to HTML through interpolation.