What is two-way data binding and how does ngModel implement it?
Learn how Angular two-way data binding works and how [(ngModel)] syncs model and view by combining property and event binding, with clear code examples.
Expected Interview Answer
Two-way data binding keeps a component property and a template control in sync so a change in either one instantly updates the other, and ngModel implements it by combining property binding with event binding.
The [(ngModel)] syntax (the "banana in a box") is syntactic sugar that expands to [ngModel]="value" plus (ngModelChange)="value = $event". The property binding pushes the model value into the input, while the event binding listens for user input and writes the new value back to the model. In modern Angular, ngModel lives in FormsModule, so you must import it before the directive works.
- Removes boilerplate of separately wiring input and output
- Keeps UI and model automatically consistent
- Readable single-directive form binding
- Works with template-driven forms and validation
- Reduces manual event-handling code
AI Mentor Explanation
Two-way binding is like the scoreboard and the umpire's tally staying locked together: when the umpire signals a boundary the scoreboard jumps by four, and if a manual scoreboard correction is made the official tally is updated to match, so neither can silently drift out of step with the other.
Step-by-Step Explanation
Step 1
Import FormsModule
Add FormsModule to the component's imports (standalone) or the NgModule so the ngModel directive is available.
Step 2
Bind the property
Use [(ngModel)]="name" on an input to connect it to a component field called name.
Step 3
Understand the expansion
Recognise that [(ngModel)]="name" is shorthand for [ngModel]="name" (ngModelChange)="name = $event".
Step 4
Input flow
The property binding writes the model value into the DOM element whenever name changes.
Step 5
Output flow
The ngModelChange event fires on user input and assigns the new value back to name, closing the loop.
What Interviewer Expects
- Correctly explains the banana-in-a-box syntax
- Knows [(ngModel)] expands to a property plus an event binding
- Mentions FormsModule is required
- Distinguishes one-way from two-way binding
- Can describe the $event write-back
Common Mistakes
- Forgetting to import FormsModule and getting a template error
- Thinking [(ngModel)] is magic rather than property + event binding
- Writing the brackets in the wrong order like ([ngModel])
- Confusing two-way binding with interpolation or one-way property binding
- Assuming two-way binding works on any component without an ngModelChange output
Best Answer (HR Friendly)
“Two-way data binding means the screen and the data behind it stay in sync automatically — if a user types in a box, the stored value updates, and if the code changes the value, the box updates too. Angular's ngModel does this by combining a way to show the value and a way to listen for changes in one simple directive.”
Code Example
<!-- shorthand -->
<input [(ngModel)]="name" placeholder="Enter name" />
<p>Hello, {{ name }}!</p>
<!-- equivalent expanded form -->
<input [ngModel]="name" (ngModelChange)="name = $event" />Follow-up Questions
- How does [(ngModel)] expand into property and event bindings?
- Why must FormsModule be imported to use ngModel?
- How do you create two-way binding on your own custom component?
- What is the difference between template-driven and reactive forms?
- How does change detection interact with ngModel updates?
MCQ Practice
1. The [(ngModel)] syntax is shorthand for which combination?
[(ngModel)] expands to [ngModel] (property binding, input flow) plus (ngModelChange) (event binding, output flow).
2. Which module must be imported to use ngModel?
The ngModel directive is provided by FormsModule; without importing it the template throws an unknown-property error.
3. In (ngModelChange)="name = $event", what does $event contain?
ngModelChange emits the control's new value, so $event is that updated value written back into the model.
Flash Cards
What is two-way data binding? — A sync where a change in the model updates the view and a change in the view updates the model.
What does [(ngModel)] expand to? — [ngModel]="value" (ngModelChange)="value = $event".
Which module provides ngModel? — FormsModule.
What is the [( )] syntax nicknamed? — The banana in a box.