Angular Interpolation
Interpolation uses double curly braces to insert a component's data directly into rendered HTML text.
The {{ }} Syntax
Interpolation is the simplest and most common form of data binding in Angular. Wrapping any TypeScript expression in double curly braces tells Angular to evaluate it against the component instance and insert the resulting text into the DOM.
Basic interpolation
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-profile',
standalone: true,
template: `
<h2>{{ fullName }}</h2>
<p>Member since {{ joinYear }}</p>
`
})
export class ProfileComponent {
fullName = 'Grace Hopper';
joinYear = 2021;
}
bootstrapApplication(ProfileComponent).catch(err => console.error(err));Expressions, Not Statements
Anything between the braces must be an expression that produces a value - property access, method calls, arithmetic, ternaries, and string concatenation are all allowed. Assignments, loops, and multi-statement code are not, because interpolation is meant only for producing displayable text.
Method calls and expressions inside interpolation
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-cart',
standalone: true,
template: `
<p>Items: {{ items.length }}</p>
<p>Total: {{ getTotal() }}</p>
<p>Status: {{ items.length > 0 ? 'Ready to checkout' : 'Cart is empty' }}</p>
`
})
export class CartComponent {
items = [12.5, 8.0, 21.75];
getTotal(): string {
const sum = this.items.reduce((a, b) => a + b, 0);
return sum.toFixed(2);
}
}
bootstrapApplication(CartComponent).catch(err => console.error(err));- {{ property }} - reads a class field directly
- {{ method() }} - calls a method and displays its return value
- {{ a + b }} - arithmetic expressions are evaluated live
- {{ condition ? 'yes' : 'no' }} - ternaries work for simple conditional text
- {{ obj.nested.value }} - safe for reading nested properties
Where Interpolation Can Appear
Interpolation works inside element text content and inside attribute values, though for attributes, property binding (covered in the attribute binding lesson) is usually the more correct tool. Angular automatically converts the interpolated result to a string.
Interpolation inside an attribute
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-avatar',
standalone: true,
template: `
<img src="/avatars/{{ userId }}.png" alt="Avatar for user {{ userId }}">
`
})
export class AvatarComponent {
userId = 42;
}
bootstrapApplication(AvatarComponent).catch(err => console.error(err));
