Two-Way Binding with ngModel

Two-way binding keeps input and component state in sync.

Step 1: Import FormsModule

If you are using standalone components:

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

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './name-form.component.html',
})
export class NameFormComponent {
  name = '';
}

Step 2: Use [(ngModel)] in template

<input [(ngModel)]="name" placeholder="Type your name" />
<p>You typed: {{ name }}</p>

Now when the user types, name updates automatically.

When to use ngModel

Great for:

• quick small forms
• prototypes
• simple settings pages

For larger apps, you will love Reactive Forms (we cover that later).

Next: Structural directives like *ngIf and *ngFor.