Interpolation with double curly braces in Angular

Introduction

Interpolation lets you show data from your code inside your webpage easily. It uses double curly braces {{ }} to insert values.

You want to display a variable's value inside your HTML.

You want to show the result of a simple expression in your template.

You want to update the displayed text automatically when the data changes.

You want to combine text and variables in your page content.

Syntax

Angular

{{ expression }}

The expression inside {{ }} can be a variable or a simple calculation.

Angular updates the displayed value automatically when the data changes.

Examples

Shows the value of the userName variable.

Angular

{{ userName }}

Shows the result of the calculation, which is 8.

Angular

{{ 5 + 3 }}

Shows the age property of the user object.

Angular

{{ user.age }}

Sample Program

This Angular component shows how to use interpolation to display a user's name and calculate their age next year.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome, {{ userName }}!</h1>
    <p>Your age next year will be {{ userAge + 1 }}.</p>
  `
})
export class AppComponent {
  userName = 'Alice';
  userAge = 29;
}

Important Notes

Interpolation only works inside Angular templates, not in regular HTML files.

Use interpolation for simple expressions. For complex logic, use component methods or pipes.

Summary

Interpolation uses {{ }} to insert data into HTML.

It updates automatically when data changes.

Use it to show variables or simple expressions in your template.