Angular 2 Interpolation Tutorial - lishman.io
lishman.io Loading..
Style: Blog or IDE

Angular 2 Interpolation and Template Expressions

Interpolation uses template expressions in double curly braces to display data from the component class and template reference variables.

Quick Tip

In the text below, when you see a word or phrase with this color, click on it to highlight the source code.

Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

Interpolation with Curly Braces

Double curly braces contain template expressions which allow us to read primitive or object values from component properties. Template expressions are similar to JavaScript and include features such as the ternary operator, concatenation and arithmetic.

If a nested object such as address is optional, use the safe navigation operator (?.) to avoid the dreaded Cannot read property 'city' of undefined.

person.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Template Reference Variables

Template expressions can access template reference variables too. A template reference variable is a reference to a DOM element or directive within a template. Here we read the values as numbers and use them to perform a couple of calculations.

We've seen that template expressions can read class properties but they can also call methods, including getter methods, on the class too.

calc.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Escaping

Interpolation automatically escapes any HTML, so here {{html}} displays <div>this is a div</div>, or more precisely it displays &lt;div&gt;this is a div&lt;/div&gt;.

This helps to protect us from malicious attacks such as XSS by sanitizing any data that may contain script tags. For example, {{script}} displays <script>alert("danger!")</script>. It does not run the alert statement.

To add a raw HTML value to the page we bind to the innerHTML DOM property instead. Using this technique we get ✰✰✰✰, whereas with interpolation we get &#10032;a&#10032;&#10032;&#10032;. To find out more about binding to DOM properties such as innerHTML, see the Angular 2 Property Binding tutorial.

escaping.component.ts x
Loading...

Incidentally, if you don't want Angular to evaluate a template expression in double curly braces then add the ngNonBindable directive to the element.

The Application

Here is the output from this component.

Loading...

Where Next?

More Tutorials

To find out more about Angular components, check out these tutorials.

  • Templates - introduction to inline and external templates.
  • Property Binding - update standard properties on the DOM using template expressions.
  • Event Binding - detect standard DOM events and execute template statements.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Input Binding - bind to <input> fields such as text, textarea, checkbox, radio and select.
  • Built-in Directives - use ngIf, ngSwitch, ngFor, ngClass and ngStyle to transform the DOM.
  • Component Input Output - use @Input and @Output to pass data in to and out of a component.

Source Code

The source code for this tutorial is available on plunker and in the angular-2-interpolation GitHub repo.