Angular Interpolation

Angular interpolation is used to display dynamic data on an HTML template (at user end). It facilitates you to make changes on component.ts file and fetch data from there to HTML template (component.html file).

We can display all kinds of properties data into view e.g. string, number, date, arrays, list or map.Interpolation is used for one way data binding. Interpolation moves data in one direction from our components to HTML elements.

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

Understanding Interpolation in Angular Application:

modify studentdetails.component.ts file.

To understand Interpolation binding let’s take an example. Lets you want to display First Name, Last Name and Age and that values set on component let level. Let’s create variables (FirstName, LastName and Age) within the StudentdetailsComponent and initialize these two variables with some default values as shown below snap.

  firstName: string = 'Jill';
  lastName: string = 'Smith';
  age: number = 50;

In order to display the FirstName, LastName and school age on studentdetails.component.html page, we need to use double curly braces to place to component properties and this is called Interpolation binding in Angular Application. The angular framework gets the value of the Name and School property from the component (i.e. StudentdetailsComponent) and then inserts the FirstName, LastName and Age value into respective places as shown below snap.

{{ firstName }} 
{{ lastName }} 
{{ age }} 

When we run the application, then it should display the FirstName, LastName and Age in the browser as shown below snap.

Angular Interpolation with hardcoded string:

Now we have display value which is assigned on component level and now you want to add or concatenate some hard-coded string value with the property value that will indicate the purpose of value for example FirstName:=, LastName:= and Age:=. To achieve this go to the html page and add in a single quote concatenate using the plus(+) as below.

{{ 'First Name:= ' + firstName }}
{{ 'Last Name:= ' +  lastName }}
{{ 'age :=' + age }}

when we run the application, then it should display the Name and School in the browser as with hard coded values which we have added as shown below snap.

Method Interpolation in Angular Application:

Let’s see how to create a method using typescript and then we will discuss how to call a class method using interpolation. So, what we will do here is, we will create one method let say GetFullName and that method will return the FirstName and LastName properties.

  GetFullName(): string {
    return 'Full Name:= ' + this.firstName + ' ' + this.lastName;
  }

And now we need to use this method in the html page instead of the properties name.

{{ 'Full Name := ' + getFullName() }}

If you want to perform mathematical calculations then you can do such calculations using interpolation. In Angular using Interpolation, you can also specify some valid expressions.

Mathematical Cal :=  {{  10 + 2 * 5 }}

Mathematical Cal := {{ age * 5 }}

Interpolation in Angular with Ternary Operator:

The expression that is enclosed in the double curly braces is commonly called Template Expression and the template expression can also be a ternary operator. Please modify the app.component.ts file as shown below. In the below example, the age property has a value i.e.’50’, so it will display the age

Age : {{ age ? age : 'No Age' }}

Now let’s modify the age property value to null when we run the application will get output as ‘No Age’

  age: number = null;

Important points on Interpolation.

• • • • Interpolation is one-way binding: Interpolation is one way as values go from the component to the template. When the component values change, the Angular updates the view. But if the values change in the view, components are not updated.
      • Should not change the state of the app: The Template expression should not change the state of the application. Angular uses it to read the values from the component and populate the view. If the Template expression changes the component values, then the rendered view would be inconsistent with the model
      • It means that you cannot make use of the following
        1. 1. 1. Assignments (=, +=, -=, …)
              2. Keywords like new, typeof, instanceof, etc
              3. Chaining expressions with ; or ,
              4. The increment and decrement operators ++ and —
              5. bitwise operators such as | and &
      • The expression must result in a string: Interpolation expression must result in a string. If we return an object it will not work. If you want to bind the expression that is other than a string (for example – boolean), then Property Binding is the best option.
      • Works only on Properties & not attributes:  Interpolation and property binding can set only properties, not attributes. For Attributes use attribute binding