`ngModel`

Two-way binds an input to a property for template-driven forms.

Since Angular 2+ Spec ↗

Syntax

[(ngModel)]="property"

Parameters

Name	Type	Required	Description
`property`	`any`	No	The component property synced with the input.

Returns

directive — Creates a control bound to the property.

Examples

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

@Component({
  selector: 'app-x',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="name" name="name" required #n="ngModel" />
    @if (n.invalid && n.touched) { <small>Required</small> }
    <p>Hello {{ name }}</p>
  `,
})
export class XComponent {
  name = '';
}

Notes

ngModel powers template-driven forms and requires FormsModule. Inside a `<form>` give each control a `name`. Export it with `#n="ngModel"` to read validity. For complex forms prefer reactive forms (FormGroup/FormControl).