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