Two-Way Binding (ngModel)

Build two-way bound form inputs using Angular's banana-in-a-box syntax and the FormsModule.

Enabling ngModel

ngModel comes from Angular's FormsModule, which a standalone component must explicitly import before using it.

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 }}!</p>
  `,
})
export class NameFormComponent {
  name = '';
}

The Banana-in-a-Box Syntax

[(ngModel)] combines square brackets (property binding) and parentheses (event binding) into one directive — commonly nicknamed "banana in a box" for its shape.

It sets the input's value from the bound property, and updates that property whenever the user changes the input — without you writing separate [value] and (input) bindings yourself.

What It Expands To

Understanding the desugared form makes it easier to reason about what's actually happening.

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

This Pattern Works for Your Own Components Too

Any component or directive that exposes a matching @Input() and an @Output() named with the Change suffix (like value and valueChange) can support the same [(...)] two-way binding syntax — this is covered in the input/output lesson.

Common Beginner Mistakes

Forgetting to import FormsModule

Without it, [(ngModel)] causes a template error — standalone components must explicitly import FormsModule to use it.

Mixing up the bracket/parenthesis order

It's [(ngModel)], not ([ngModel]) — square brackets go on the outside, matching "banana in a box."

FAQs

Is ngModel the recommended way to build all forms in Angular?

It's the foundation of template-driven forms, one of two official approaches — reactive forms (covered later in this course) are generally preferred for anything beyond simple forms.

Does ngModel work with checkboxes and selects too?

Yes — it adapts to the underlying input type, binding to checked for checkboxes and value for selects, exactly like native two-way binding elsewhere.

Summary

[(ngModel)] gives you concise two-way binding by combining property and event binding into one directive. With template fundamentals covered, the next section moves into structural and attribute directives.

Next Lesson →