Interpolation — AngularJS

Interpolation in Angular

Interpolation is the most fundamental form of data binding in Angular. The double-curly-brace syntax {{ expression }} evaluates a TypeScript expression and inserts the result as text into the DOM. Every Angular developer uses it daily.

Basic Syntax

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
    <h1>Hello, {{ name }}!</h1>
    <p>Version: {{ version }}</p>
    <p>Items in cart: {{ itemCount }}</p>
  `,
})
export class HelloComponent {
  name = 'Angular';
  version = 17;
  itemCount = 3;
}

Hello, Angular!
Version: 17
Items in cart: 3

Expressions Inside Interpolation

The content between the curly braces is a template expression — a subset of JavaScript that Angular evaluates and converts to a string.

HTML

<!-- Arithmetic -->
<p>{{ 10 + 5 }}</p>            <!-- 15 -->

<!-- String operations -->
<p>{{ 'hello' + ' ' + 'world' }}</p>   <!-- hello world -->
<p>{{ title.toUpperCase() }}</p>        <!-- ANGULAR TUTORIAL -->

<!-- Ternary -->
<p>{{ isLoggedIn ? 'Welcome back!' : 'Please log in' }}</p>

<!-- Method calls -->
<p>{{ getFullName() }}</p>

<!-- Nullish coalescing -->
<p>{{ user?.displayName ?? 'Anonymous' }}</p>

<!-- Array / string length -->
<p>{{ items.length }} item(s) in your list</p>

Note

Template expressions must be simple and side-effect-free. Avoid assignments (\`=\`), \`new\`, chained expressions (\`;\`), increment/decrement (\`++\`/\`--\`), and bitwise operators in interpolation.

Interpolation with Pipes

Pipes transform interpolated values for display. Chain as many pipes as you need with the | character.

import { Component } from '@angular/core';
import { DatePipe, CurrencyPipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-pipes-demo',
  standalone: true,
  imports: [DatePipe, CurrencyPipe, UpperCasePipe],
  template: `
    <p>{{ today | date:'mediumDate' }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ title | uppercase }}</p>
    <p>{{ score | number:'1.2-2' }}</p>

    <!-- Pipe chaining -->
    <p>{{ today | date:'shortDate' | uppercase }}</p>
  `,
})
export class PipesDemoComponent {
  today = new Date();
  price = 1299.99;
  title = 'angular interpolation';
  score = 3.14159;
}

Jul 1, 2026
$1,299.99
ANGULAR INTERPOLATION
3.14
07/01/2026

Interpolation vs Property Binding

Interpolation is shorthand for property binding on the textContent property. The two forms below produce identical results for string values:

HTML

<!-- Interpolation -->
<p>{{ message }}</p>

<!-- Equivalent property binding -->
<p [textContent]="message"></p>

Use Case	Recommended Syntax
Displaying text content	{{ value }}
Setting DOM properties (src, href, disabled)	[property]="value"
Setting component @Input	[inputName]="value"
String concatenation in attributes	attr="{{ a }}-{{ b }}"

Interpolation in HTML Attributes

You can also use interpolation inside HTML attribute values, which is handy when you need to build a string from multiple parts.

HTML

<!-- Concatenating in an attribute value -->
<img src="{{ baseUrl }}/images/{{ imageName }}.png" alt="{{ imageAlt }}" />

<!-- Building a CSS class string -->
<div class="btn btn-{{ color }} btn-{{ size }}">Click me</div>

<!-- ID construction -->
<label for="field-{{ id }}">Label</label>
<input id="field-{{ id }}" type="text" />

Warning

For the \`href\`, \`src\`, and \`action\` attributes on \`a\`, \`img\`, and \`form\` elements, prefer property binding \`[src]="expr"\` over attribute interpolation. Interpolation on \`src\` can trigger an extra HTTP request before Angular processes the binding.

Calling Component Methods

Template expressions can call component methods. Keep these methods pure and fast — Angular calls them on every change detection cycle.

@Component({
  selector: 'app-product',
  standalone: true,
  template: `
    <p>{{ getDiscountedPrice() | currency }}</p>
    <p>{{ formatDate(product.createdAt) }}</p>
    <p>{{ product.tags.join(', ') }}</p>
  `,
})
export class ProductComponent {
  product = {
    price: 99.99,
    discount: 0.15,
    createdAt: new Date('2024-01-15'),
    tags: ['sale', 'featured', 'new'],
  };

  getDiscountedPrice(): number {
    return this.product.price * (1 - this.product.discount);
  }

  formatDate(date: Date): string {
    return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
  }
}

Tip

If a method is expensive, consider computing the value once in \`ngOnInit\` or using a computed signal instead. Method calls in templates run on every change detection cycle.

Safe Navigation with Interpolation

Use the optional chaining operator ?. to guard against null or undefined values inside interpolation.

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <!-- Safe — shows empty string if user is null -->
    <p>{{ user?.name }}</p>
    <p>{{ user?.address?.city }}</p>

    <!-- With fallback using nullish coalescing -->
    <p>{{ user?.name ?? 'Guest User' }}</p>
    <p>{{ user?.phone ?? 'No phone provided' }}</p>
  `,
})
export class UserCardComponent {
  user: { name: string; address?: { city: string }; phone?: string } | null = null;
}

What You Cannot Do in Interpolation

Assignments: {{ x = 5 }} is not allowed.
The new keyword: {{ new Date() }} does not work.
Chained statements with semicolons.
Increment/decrement operators: {{ count++ }} is not allowed.
Global JavaScript objects (unless exposed on the component): {{ Math.random() }} fails.
Bitwise operators.

To use something like Math.random(), expose it from the component class:

@Component({
  selector: 'app-math-demo',
  standalone: true,
  template: `<p>Random: {{ Math.random() | number:'1.3-3' }}</p>`,
})
export class MathDemoComponent {
  // Expose Math so the template can access it
  protected readonly Math = Math;
}

Summary

{{ expr }} evaluates a TypeScript expression and inserts it as text.
Expressions can include arithmetic, string methods, ternaries, and method calls.
Pipe with | to format values: {{ date | date:"short" }}.
Use ?. (optional chaining) to guard against null/undefined.
Keep template expressions simple and side-effect-free.
For non-text bindings (src, disabled, @Input) use [property] binding instead.