Interpolation

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 !.