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: ```ts 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 ```html <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.