Templates and Interpolation

Angular Templates

Angular templates are HTML files enriched with Angular-specific syntax. The most fundamental feature is interpolation — embedding TypeScript expressions directly in the HTML using double curly braces {{ }}. Angular evaluates the expression and renders the result as a string.

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

@Component({
  selector: 'app-profile',
  standalone: true,
  template: `
    <h1>{{ firstName + ' ' + lastName }}</h1>
    <p>Age: {{ age }}</p>
    <p>Born: {{ birthYear() }}</p>
    <p>Uppercase: {{ firstName.toUpperCase() }}</p>
  `
})
export class ProfileComponent {
  firstName = 'Ada';
  lastName = 'Lovelace';
  age = 30;

  birthYear() {
    return new Date().getFullYear() - this.age;
  }
}

What Can Go Inside {{ }}?

• Property access: {{ user.name }}
• Method calls: {{ getTotal() }}
• Arithmetic: {{ price * quantity }}
• Ternary: {{ isLoggedIn ? 'Welcome' : 'Please log in' }}
• String methods: {{ title.toLowerCase() }}

Angular re-evaluates interpolation expressions during change detection. When a component's state changes, Angular updates only the DOM nodes that depend on the changed values — keeping the UI in sync without you manually touching the DOM.