Use Interpolation To Show Dynamic Data In Angular

In any app, it is important to have mechanism to provide dynamic data to the view. Without dynamic data, the page just becomes a static page. In an angular app, we can use Interpolation to show dynamic data that’s defined within the component class as well as template variables.

Basic Interpolation

To exchange data within the component class and the view, we can use the double curly braces ({{ }})as below:

{{ Template Expression }}

By default, Angular CLI generates a property called “title” in the “app.component.ts” file. This property is an example of how we can bind a string value using Interpolation.

export class AppComponent {

title='app';

}

We can use the value of this “title” property anywhere within the HTML template by using the doubly curly braces as stated above.

Sample Case: Use Interpolation To Show Dynamic Data

We can also use interpolation to show dynamic data with specific properties that are part of an object. So let’s create an object named “teams”, and it will contain three properties representing the three different types of roles.

export class AppComponent {

title='app';

teams= {developer:"Mr Joe", designer:"Miss Rani", manager:"Mr Tommy"}

}

Now, if we want to display the value of “teams” within our view, Interpolation comes to our rescue.

If we just do {{ teams }}, we will get [object Object]. This is because we have to specify object property that we want to display.

So, if we do something as below in our HTML template:

<h1>

Welcome to {{title}}!

</h1>

Here are our teams:

<ul>

<li>Developer: {{ teams.developer }}</li>

<li>Designer: {{ teams.designer }}</li>

<li>Manager: {{ teams.manager }}</li>

</ul>

Again, if we serve our application using the Angular CLI, we can see the changes reflected in our app.

Use Interpolation To Show Dynamic Data

In this example, we have used static values defined inside the component to display in the view.

READ Writing For Loops In Angular With ngFor Directive

In an actual app, we use Interpolation technique to display dynamic data for the user. We can dynamically get the values of our “teams” object from the server or Web API and update those values using Interpolation to show data dynamically to our end user.

Thus, as can be seen with this simple example, the Interpolation is an important feature provided by the Angular app.