Interpolation directive in Angular

When creating any new Angular project, you’ll see the default in the app.component.html file, thing, which in the tutorial about Angular’s Component I call it placeholder {{title}}, actually its name must be the Interpolation directive, which is used to display the data from the Component class in this Component’s template file. In this tutorial, we will learn more about this Interpolation directive!

First, I will create a new Angular project as an example:

Interpolation directive in Angular

For simplicity, I will use AppComponent in src/app/app.component.ts file with template property for @Component decorator as follows:

Result:

Interpolation directive in Angular

As you can see to declare an Interpolation directive in Angular, we will use two curly braces, inside, they can be declared the name of a property in the Component.

As in our example above, the title is a property in AppComponent class and Angular will evaluate this Interpolation directive with the value of the title property.

We can also get the relevant information of the title property in Interpolation, for example getting the length of this property:

Or uppercase the title property:

Result:

Interpolation directive in Angular

You can also perform calculations, concatenate strings with the Interpolation directive.

Examples are as follows:

Result:

Interpolation directive in Angular

Or call a method that returning value in Component with Interpolation directive:

Result:

Interpolation directive in Angular

Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment