ngModel for form binding in Angular - Step-by-Step Execution

Concept Flow - ngModel for form binding

User types in input field

↓

ngModel updates component variable

↓

Component variable changes

↓

Input field reflects updated variable

↓

Two-way binding keeps input and variable in sync

This flow shows how ngModel binds an input field and a component variable so they update each other automatically.

Execution Sample

Angular

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

@Component({
  selector: 'app-root',
  template: `<input [(ngModel)]="name" /> <p>Hello {{name}}</p>`
})
export class AppComponent {
  name = '';
}

This code binds the input field to the 'name' variable using ngModel, so typing updates 'name' and the paragraph shows the current value.

Execution Table

Step	User Input	Component Variable 'name'	Action	Rendered Output
1	'' (empty)	'' (empty)	Initial state, no input	<input value=''> <p>Hello </p>
2	'A'	'' (before update)	User types 'A' in input	<input value='A'> <p>Hello </p>
3	'A'	'A' (updated by ngModel)	ngModel updates 'name' to 'A'	<input value='A'> <p>Hello A</p>
4	'Al'	'A' (before update)	User types 'l' making input 'Al'	<input value='Al'> <p>Hello A</p>
5	'Al'	'Al' (updated by ngModel)	ngModel updates 'name' to 'Al'	<input value='Al'> <p>Hello Al</p>
6	'Al'	'Al'	No further input, stable state	<input value='Al'> <p>Hello Al</p>

💡 User stops typing, ngModel keeps input and variable synchronized.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
name	'' (empty)	'A'	'Al'	'Al'

Key Moments - 2 Insights

Why does the paragraph not update immediately when I type a letter?

At step 2, the input changes but the component variable 'name' updates only after ngModel processes the input at step 3, so the paragraph updates then.

What keeps the input field and the variable 'name' in sync?

The [(ngModel)] directive binds the input and variable two-way, so changes in one update the other automatically, as shown in steps 3 and 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' after step 3?

A 'Al'

B 'A'

C '' (empty)

D undefined

💡 Hint

Check the 'Component Variable' column at step 3 in the execution_table.

At which step does the paragraph first show 'Hello Al'?

A Step 3

B Step 2

C Step 5

D Step 6

💡 Hint

Look at the 'Rendered Output' column for when 'Hello Al' appears.

If the user deletes all input, what will 'name' be set to?

A '' (empty string)

B undefined

C null

D 0

💡 Hint

ngModel binds to the input's value, which is an empty string when cleared.

Concept Snapshot

ngModel binds input fields to component variables with two-way binding.
Use [(ngModel)]="variable" in the template.
Typing updates the variable, and variable changes update the input.
This keeps UI and data in sync automatically.
Requires importing FormsModule in Angular module.

Full Transcript

The ngModel directive in Angular creates a two-way binding between an input field and a component variable. When the user types in the input, ngModel updates the variable. When the variable changes, the input field updates to match. This keeps the UI and data synchronized without extra code. The example shows an input bound to 'name'. As the user types 'A' then 'l', the variable updates step-by-step, and the paragraph displays the current value. This flow helps beginners see how ngModel works in practice.