Interpolation

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

HTML is the language of the Angular template. Almost all HTML syntax is valid template syntax.

Source
Just a regular <strong>html</strong>!
Result
Just a regular html!
Tutorials

You use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.

Source
{{title}}
<div>
  <img src="{{imageUrl}}" style="height:150px">
</div>
export class MyComponent {
  title = 'Angular';
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
}
Result
Angular

More generally, the text between the braces is a template expression that Angular first evaluates and then converts to a string.

Source
The sum of 1 + 1 is {{1 + 1}}
Result
The sum of 1 + 1 is 2

The expression can invoke methods of the host component such as getVal(), seen here:

Source
The sum of 1 + 1 is not {{1 + 1 + getVal()}}
export class MyComponent {
  getVal() {
    return 2;
  }
}
Result
The sum of 1 + 1 is not 4

You write these template expressions in a language that looks like JavaScript. Many JavaScript expressions are legal template expressions, but not all.

JavaScript expressions that have or promote side effects are prohibited, including:

  • assignments (=, +=, -=, …)
  • new
  • chaining expressions with ; or ,
  • increment and decrement operators (++ and --)

Other notable differences from JavaScript syntax include:

  • no support for the bitwise operators | and &
  • new template expression operators, such as |, ?. and !.