Angular Templates: Interpolation

Display component values with {{ ... }}.

What is Interpolation?

• Displays component values in the DOM with double curly braces.
• Read it as: “take this value and print it as text”.
• One-way only: data → view.

When to use Interpolation

• Show text values and simple, fast expressions (no side effects).
• Use property/attribute binding for dynamic attributes.
• For HTML content, consider [innerHTML] with care.

{{ expression }}

{{ expression }}: Evaluates against the component and inserts the result as text (HTML-escaped).

REMOVE ADS

Example

Use interpolation to display component values in the DOM:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>{{ title }}</h3>
    <p>Hello {{ name }}!</p>
    <p>2 + 3 = {{ 2 + 3 }}</p>
    <p>Upper: {{ name.toUpperCase() }}</p>
  `
})
export class App {
  title = 'Templates & Interpolation';
  name = 'Angular';
}

bootstrapApplication(App);

<app-root></app-root>

Example explained

• Interpolation {{ expression }}: Angular evaluates the expression against the component and inserts the result as text (HTML-escaped).
• Property values: {{ title }} and {{ name }} read component fields.
• Expressions: {{ 2 + 3 }} evaluates arithmetic; {{ name.toUpperCase() }} calls a method on the string value.
• Text vs HTML: Interpolation escapes HTML. To render HTML, bind with [innerHTML] carefully.