Two-Way Binding with ngModel

Two-way binding combines property binding [ ] and event binding ( ) into a single syntax: [( )]. It keeps a component field and a form input in sync.

Basic ngModel Usage

@Component({
  selector: 'app-name-input',
  template: `
    <input [(ngModel)]="name" placeholder="Enter name">
    <p>Hello, {{ name }}!</p>
  `,
})
export class NameInputComponent {
  name = '';
}

When the user types in the input, name updates automatically. When name changes in the component, the input updates automatically.

What [(ngModel)] Really Means

<!-- This: -->
<input [(ngModel)]="name">

<!-- Is shorthand for this: -->
<input [ngModel]="name" (ngModelChange)="name = $event">

Requirements

ngModel requires FormsModule to be imported:

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

@Component({
  selector: 'app-example',
  imports: [FormsModule],
  template: `<input [(ngModel)]="value">`,
})
export class ExampleComponent {
  value = '';
}

Multiple Fields

@Component({
  selector: 'app-user-form',
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="user.firstName" placeholder="First name">
    <input [(ngModel)]="user.lastName" placeholder="Last name">
    <input [(ngModel)]="user.email" type="email" placeholder="Email">
    <input [(ngModel)]="user.age" type="number" placeholder="Age">

    <pre>{{ user | json }}</pre>
  `,
})
export class UserFormComponent {
  user = { firstName: '', lastName: '', email: '', age: 0 };
}

You can implement two-way binding in your own components using model() or @Input + @Output.

Using model() (Modern)

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="decrement()">-</button>
    <span>{{ count() }}</span>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  count = model<number>(0);

  increment(): void {
    this.count.update(c => c + 1);
  }

  decrement(): void {
    this.count.update(c => c - 1);
  }
}

<app-counter [(count)]="parentCount"></app-counter>

Using @Input + @Output (Traditional)

@Component({
  selector: 'app-rating',
  template: `
    <span *ngFor="let star of [1,2,3,4,5]"
          (click)="setRating(star)"
          [class.filled="star <= rating">
      ★
    </span>
  `,
})
export class RatingComponent {
  @Input() rating = 0;
  @Output() ratingChange = new EventEmitter<number>();

  setRating(value: number): void {
    this.rating = value;
    this.ratingChange.emit(value);
  }
}

<app-rating [(rating)]="productRating"></app-rating>

Template-Driven vs Reactive Forms

For complex forms, prefer reactive forms (covered in Phase 524).