Two-Way Binding with ngModel

Two-Way Data Binding

Two-way binding synchronizes a component property with an input field in both directions: changes in the component update the input, and user input updates the component. Angular uses the [(ngModel)] syntax — nicknamed "banana in a box" because of its [()] shape.

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

@Component({
  selector: 'app-name-editor',
  standalone: true,
  imports: [FormsModule],
  template: `
    <label>Name:
      <input [(ngModel)]="name" placeholder="Enter name" />
    </label>
    <p>Hello, {{ name }}!</p>
    <button (click)="clear()">Clear</button>
  `
})
export class NameEditorComponent {
  name = 'Angular';

  clear() {
    this.name = '';
  }
}

Under the hood, [(ngModel)] desugars to [ngModel]="name" (ngModelChange)="name = $event". You can write it this long form when you need to run additional logic on change. Two-way binding is most useful for template-driven forms and simple interactive widgets.