What is [(ngModel)] in Angular?

What is [(ngModel)]?

[(ngModel)] is an Angular directive syntax used to implement two-way data binding, especially with form controls such as <input>, <select>, and <textarea>.

It synchronizes a form control's value with a component property in both directions:

Component ↔ View

Syntax:

[(ngModel)]="propertyName"

Example:

userName = 'Syed';

<input [(ngModel)]="userName">

<p>{{ userName }}</p>

If userName changes in TypeScript, the textbox changes. If the user types a new value in the textbox, userName changes.

Why Do We Need [(ngModel)]?

Without [(ngModel)], if we want both directions of communication, we can write separate bindings:

<input
  [ngModel]="userName"
  (ngModelChange)="userName = $event">

Angular provides a shorter syntax:

<input [(ngModel)]="userName">

So instead of managing the value and change event separately, [(ngModel)] conveniently keeps them synchronized.

Purpose

The primary purpose of [(ngModel)] is to bind a form control to a component property and keep both synchronized.

It is commonly used with:

<!-- Textbox -->
<input [(ngModel)]="name">

<!-- Textarea -->
<textarea [(ngModel)]="description"></textarea>

<!-- Checkbox -->
<input type="checkbox" [(ngModel)]="isActive">

<!-- Select -->
<select [(ngModel)]="selectedCity">
  <option value="Erode">Erode</option>
  <option value="Chennai">Chennai</option>
</select>

Simple Example

TypeScript

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

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './user.html'
})
export class User {
  userName = 'Syed';
}

HTML

<input [(ngModel)]="userName">

<h2>Hello {{ userName }}</h2>

Initially:

Component
userName = "Syed"
      ↓
Textbox displays "Syed"

If the user changes the textbox to:

Mohamed

Angular updates:

userName = 'Mohamed';

and the page displays:

Hello Mohamed

How Does [(ngModel)] Work?

This is the most important concept.

[(ngModel)]="userName"

is essentially shorthand for:

[ngModel]="userName"
(ngModelChange)="userName = $event"

The first part:

[ngModel]="userName"

is property binding:

Component → View

The second part:

(ngModelChange)="userName = $event"

is event binding:

View → Component

Together:

[ngModel] + (ngModelChange)
             ↓
       [(ngModel)]
             ↓
      Component ↔ View

What is "Banana in a Box"?

The syntax:

[()]

is commonly called banana-in-a-box syntax.

Think of:

[ ] = Box
( ) = Banana

[()] = Banana in a Box

Therefore:

[(ngModel)]="userName"

means two-way binding.

This is a common Angular interview question.

FormsModule is Required

ngModel belongs to Angular's FormsModule.

For a modern standalone component:

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

@Component({
  standalone: true,
  imports: [FormsModule]
})
export class User {
}

If FormsModule is not imported, Angular cannot use ngModel in that component's template.

Before Standalone Components

In traditional module-based Angular applications, FormsModule was imported into an NgModule, commonly AppModule or a feature module.

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
})
export class AppModule {
}

Modern standalone Angular

@Component({
  standalone: true,
  imports: [FormsModule]
})
export class User {
}

So the [(ngModel)] concept is the same; where FormsModule is imported has changed.

ngModel vs [(ngModel)]

These are related but not exactly the same syntax.

One-way

<input [ngModel]="userName">

Primarily sends:

Component → View

Two-way

<input [(ngModel)]="userName">

Sends:

Component ↔ View

The [( )] syntax is what creates the two-way binding.

Advantages

• Simple two-way binding syntax.
• Reduces boilerplate code.
• Automatically synchronizes UI and component values.
• Easy to understand and use.
• Very convenient for template-driven forms.
• Works with common form controls such as input, textarea, select, and checkbox.

Disadvantages

1. Requires FormsModule

You must import:

FormsModule

2. Can Make Data Flow Harder to Track

With extensive two-way binding:

Component ↔ View

the value can change from either side.

3. Less Suitable for Complex Forms

For large forms requiring complex validation, dynamic controls, and explicit state management, Reactive Forms are often preferable.

4. Not Needed for Every Input

If you only need to react to a value change, separate event binding may be sufficient.

Key Points

• ngModel is provided by Angular's FormsModule.
• [(ngModel)] provides two-way data binding.
• Direction:

Component ↔ View

• Syntax:

[(ngModel)]="property"

• It combines the concepts of:

[ngModel]        → Component → View

(ngModelChange)  → View → Component

• [()] is known as banana-in-a-box syntax.
• [(ngModel)] is commonly associated with template-driven forms.
• In standalone components, import FormsModule directly into the component's imports.

Interview Questions and Answers

Q1. What is [(ngModel)] in Angular?

Answer:
[(ngModel)] is used for two-way data binding between a form control and a component property.

<input [(ngModel)]="userName">

It keeps the component property and UI value synchronized.

Q2. What is the direction of [(ngModel)]?

Answer:

Component ↔ View

Changes in the component update the control, and user changes to the control update the component property.

Q3. Which module is required for ngModel?

Answer:

FormsModule is required.

For standalone components:

imports: [FormsModule]

Q4. How does [(ngModel)] work internally?

Answer:

<input [(ngModel)]="userName">

is essentially shorthand for:

<input
  [ngModel]="userName"
  (ngModelChange)="userName = $event">

So it combines property binding and event binding.

Q5. What is banana-in-a-box syntax?

Answer:

The syntax:

[()]

is called banana in a box.

[(ngModel)]="userName"

It represents two-way binding.

Q6. What is the difference between [ngModel] and [(ngModel)]?

Answer:

Q7. Is ngModel mainly used with Reactive Forms?

Answer:
No. ngModel is primarily associated with template-driven forms.

Reactive Forms generally use APIs such as:

FormControl
FormGroup
formControl
formControlName

rather than relying on [(ngModel)] for form state.