Angular templates connect your component class to the DOM through data binding. There are four main types.

Interpolation

Display component data in the template with double curly braces:

  @Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    <h1>{{ title }}</h1>
    <p>2 + 2 = {{ 2 + 2 }}</p>
    <p>Uppercase: {{ name.toUpperCase() }}</p>
  `
})
export class GreetingComponent {
  title = 'Welcome';
  name = 'angular';
}

Interpolation converts values to strings and updates the view when data changes.

Property Binding

Set DOM element or component properties with square brackets:

  <!-- Bind to a native property -->
<img [src]="imageUrl" [alt]="imageAlt">

<!-- Bind to a component input -->
<app-user-card [name]="currentUser.name" [email]="currentUser.email">

<!-- Disable a button when loading -->
<button [disabled]="isLoading">Submit</button>
  
  export class ProfileComponent {
  imageUrl = 'assets/avatar.png';
  imageAlt = 'User avatar';
  isLoading = false;
  currentUser = { name: 'Alice', email: '[email protected]' };
}

Property binding is one-way: class → template.

Event Binding

Listen to DOM or component events with parentheses:

  <button (click)="save()">Save</button>
<input (input)="onSearch($event)" placeholder="Search...">
<app-item (selected)="onItemSelected($event)" />
  
  export class SearchComponent {
  query = '';

  save() {
    console.log('Saved!');
  }

  onSearch(event: Event) {
    this.query = (event.target as HTMLInputElement).value;
  }

  onItemSelected(item: string) {
    console.log('Selected:', item);
  }
}

Use $event to access the native event object or emitted value.

Two-Way Binding

Combine property and event binding with [(ngModel)]:

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

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="name" placeholder="Your name">
    <p>Hello, {{ name || 'stranger' }}!</p>
  `
})
export class NameFormComponent {
  name = '';
}

FormsModule must be imported for ngModel to work.

Binding Syntax Summary

Syntax Direction Example
{{ value }} Class → View {{ title }}
[property]="expr" Class → View [disabled]="isBusy"
(event)="handler()" View → Class (click)="submit()"
[(ngModel)]="field" Both ways [(ngModel)]="email"

Attribute vs Property Binding

HTML attributes and DOM properties differ. Use [attr.aria-label] for attributes:

  <button [attr.aria-label]="buttonLabel" [disabled]="isDisabled">
  Click me
</button>

Class and Style Binding 

  <div [class.active]="isActive" [class.error]="hasError">Status</div>
<div [style.color]="textColor" [style.font-size.px]="fontSize">Styled text</div>

For multiple classes, prefer [ngClass] (covered in the Directives chapter).

Data binding keeps your templates declarative: describe what the UI should reflect, and Angular updates the DOM when your data changes.