Angular Interpolation

Angular Interpolation

In this article, I am going to discuss the Angular Interpolation Binding. The Angular Interpolation is used to achieve one way data-binding i.e. From Component to the View Template. Please read our last article before proceeding to this article, In our last article, I give a brief introduction on Angular Data Binding and its types and classifications.

If you want to display the read-only data on a view template (From Component to the View Template), then you can use the one-way data binding technique i.e. the Angular interpolation. The interpolation allows you to place the component property name in the view template, enclosed in double curly braces: {{propertyName}}.  So, the Interpolation is a technique that allows the user to bind a value to a UI element.

Let us understand Interpolation with some examples.

Modify the app.component.ts file as shown below

Angular Interpolation

In the above example, the Angular gets the value of FirstName and LastName property from the component (i.e. AppComponent) and then inserts the FirstName and LastName value between the opening and closing <h1> element. So, when you run the application, it will display the FirstName and LastName in the browser as shown below.

Angular Interpolation

We can also concatenate some hard-coded string with the property value. To understand this modify the app.component.ts file as shown in the below image.

Angular Interpolation When we run the application it will display the FirstName and LastName property value along with the hardcoded string as shown below.

Angular Interpolation

 

Angular Interpolation with Expression:

You can also specify some valid expression in double curly braces. For example, if you want to perform a mathematical calculation then you need to do such calculations as shown in the following image.

Angular Interpolation When you run the application, it will perform the calculation and display the output as shown below.

Angular Interpolation

If you want then you can combine the expression with the property value as shown in the below example.

Angular Interpolation

When you run the application, it will display the output as shown below.

Angular Interpolation

Angular Interpolation with Ternary Operator:

The expression that is enclosed in the double curly braces is commonly called as Template Expression and the template expression can also be a ternary operator as shown in the below example.

Angular Interpolation

In the above example, the Lastname property has a value Rout, so, you can see the last name in the browser as shown below when you run the application

Angular Interpolation

Now let’s modify the LastName property value to null as shown in the below example and then run the application.

Angular Interpolation

Now, when you run the application it will display the below output in the browser.

Angular Interpolation

Let’s see how to call a class method using interpolation and you will also see how to create a method using typescript.

Angular Interpolation

When you run the application, it will display the following output.

Angular Interpolation

You can also display images using Interpolation. Modify the app.component.ts file as shown below to display images.

Angular Interpolation

When you run the application, it will display the following page in the browser.

Angular Interpolation

In the next article, I will discuss Property Binding in Angular Application.

SUMMARY:

In this article, I try to explain Angular Interpolation with some examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *