What is Interpolation in Angular: Simple Explanation and Example

In Angular, interpolation is a way to display dynamic data inside HTML by embedding expressions within double curly braces like {{ expression }}. It connects your component's data to the view, updating the displayed content automatically when the data changes.

How It Works

Interpolation in Angular works like filling in blanks in a letter. Imagine you have a letter template that says "Hello, {{name}}!". When you send the letter, Angular replaces {{name}} with the actual value from your component, like "Alice".

This happens because Angular looks inside the double curly braces and evaluates the expression there. It then updates the HTML to show the result. If the data changes, Angular automatically updates the view, so you always see the latest value.

Think of interpolation as a bridge that connects your app's data and the visible page, making your web page dynamic and interactive without extra code to update the display.

Example

This example shows how to use interpolation to display a greeting message with a name from the component.

typescript

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

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class GreetingComponent {
  name = 'Alice';
}

Output

<h1>Hello, Alice!</h1>

When to Use

Use interpolation whenever you want to show data from your component inside your HTML. It is perfect for displaying text, numbers, or any simple expression directly in the view.

For example, show a user's name, display the current date, or calculate and show a value like a total price. Interpolation keeps your UI in sync with your data without extra effort.

Key Points

• Interpolation uses {{ }} to embed expressions in HTML.
• It automatically updates the view when data changes.
• Works only for displaying data, not for event handling or complex logic.
• Simple and readable way to connect component data to the UI.

Key Takeaways

Interpolation in Angular displays component data inside HTML using {{ }} syntax.

It automatically updates the view when the underlying data changes.

Use interpolation for simple data binding like showing text or numbers.

It keeps your UI dynamic without extra code to update the page.