Interpolation according to dictionary means “to insert (words) into a text or into a conversation” or “to insert between other things or parts”.

In Angular, text interpolation allows you to dynamically insert string value in HTML template. HTML template represents the view of a component. Using text interpolation, we can dynamically show string values like heading, messages, text, labels etc.

Syntax and use text interpolation

For this example, let us suppose we are working in app component. Suppose we want to show user name in HTML template. For example:

<h1>User name: John Taylor</h1>

This is a hard coded value. We would like to bind it to a variable username in component, so that we can change the value of the variable and it should change the view in browser as well.

username = 'John Taylor'

We can display the value of this variable in template using interpolation. Whenever, there will be a change in the value of the variable, the view will be updated to show the latest value.

<h1>User name: {{username}}</h1>

Angular replaces {{username}} with the value of variable username.

By default, interpolation delimiters are {{ and }}.

The delimiters can be changed using the interpolation option in the Component metadata.

Template expressions

A template expression is an expression within {{ and }} and produces a value. The angular expression is resolved and then assigned to the property of a binding target.

Let us see few examples of template expression:

<p>Name: {{ name }}</p>

<p>Name: {{ firstName + lastName }}</p>

<p>Length of First Name: {{ firstName.length }}</p>

<p>summ of 10 + 15 is: {{ 10 + 15 }}</p>

<p>Sum of 1 and pi is: {{ 1 + getValueOfPi() }}</p>

When interpolation is used, following tasks are performed by Angular:

• Angular evaluates the expression between {{ and }}.
• The resolved value is converted to string.
• If there is any adjacent string, Angular links the result to that string.
• Assigns the final result to the element or directive property.

Text interpolation in image element

Interpolation also works for img element src attribute.

We can bind the value of a variable to the src attribute like the following:

<img src="{{imageUrl}}" />

Here, imageUrl is a property in component.

What is not supported in template expression?

• Whatever that produces a side effect or may produce is side effect is not allowed in template expression like =, +=, -=, …, ++ and --.
• Chaining expressions with ' and ; is not allowed.
• bitwise operators (| and & ), new, typeof, instanceof, ! ( non-null assertion operator ) and ?. operators are not supported.
• We can’t call console.log() in template expression.
• Template expression can’t refer to the global namespace objects like window or document.

Template expression context

Every template expression has a context and the expression is evaluated with respect to its context. Usually the context of template expression is a component. The template expression can have following contexts and are resolved in the following order in case of conflict:

• Template
• Directive
• Component

If the variable is present in the multiple contexts then it may result in shadowing of variables. In the following example, employee refers to the variable in the component and also template variable.

In the for loop, shadowing of variable will happen and template variable will take precedence. So, in the for loop, ‘Smith’ will not be printed.

@Component({
  template: `
    <div>
      <h1>Employee name: {{employee}}</h1>
      <ul>
        <li *ngFor="let employee of employees">{{ employee.name }}</li>
      </ul>
    </div>
  `
})
class AppComponent {
  customers = [{name: 'John'}, {name: 'Clark'}];
  customer = 'Smith';
}

Note

Template expressions are executed for every change detection cycle. Therefore, template expressions should be short. Long and complex expressions can make the loading of page slow and can make degrade user experience.