Angular - 2.13 Interpolation of strings-eng

String interpolation is the simplest form of data binding in Angular. It allows a template to display any string value coming from the matching component class without writing extra glue code. The syntax is a pair of double curly braces wrapping a TypeScript expression: {{ expression }}. As soon as the expression can be converted into a string, Angular evaluates it on every change detection cycle and updates the rendered text.

Consider a component with two public properties: userName = 'Naziff' and serverStatus = 'online'. From the template we can display them by writing <p>User: {{ userName }} - Status: {{ serverStatus }}</p>. We can also embed any valid TypeScript expression that returns a string or a primitive, such as {{ 'Server count: ' + getServerCount() }} or {{ 2 + 3 }}. The only constraint is that the expression must be synchronous and must resolve to a value that can be turned into a string.

What you cannot do with interpolation

• No multi-line statements: only a single expression is allowed inside the braces.
• No declarations: let, const, var and assignments are forbidden.
• No control flow keywords: if, for, while belong to structural directives, not interpolation.

Interpolation is read-only: it consumes data from the class and renders it in the DOM, but it does not push anything back. To bind to an HTML attribute (rather than text content) Angular offers property binding with square brackets. To react to user input it offers event binding with parentheses. And to combine both directions it offers two-way binding with [(ngModel)]. We will cover those next, but interpolation already lets you build dynamic, data-driven views with very little syntax to remember.