Directivesbeginner
Two-way Data Binding with ngModel
Explain how [(ngModel)] combines property and event binding into Angular's banana-in-a-box two-way binding syntax.
[(ngModel)] is usually a new Angular developer's first encounter with two-way data binding, and interviewers ask about it to check whether you understand that it isn't actually special syntax magic — it's Angular's general banana-in-a-box convention, [(x)], which is sugar for simultaneously property-binding [x] and event-binding (xChange), applied here to the NgModel directive specifically.
It's like a thermostat and a room temperature sensor wired to each other — turning the dial changes the room, and the room's actual temperature is fed back to update the dial's display, keeping both in constant agreement.
Key Concepts
1
NgModel itself is a directive (part of FormsModule) that wraps ControlValueAccessor machinery to keep a form control's displayed value synchronized with a component property: it listens for the native input/change event (writing the new value back to your bound property) and it writes your property's value into the DOM element whenever it changes from the component side, satisfying both halves of the box-and-banana convention (ngModel as an input, ngModelChange as its paired output).
NgModelFormsModuleControlValueAccessorinputchange
2
A sharp interview answer flags the trade-off against reactive forms: [(ngModel)] is convenient and reads well for very simple cases, but it entangles form state directly with the component class's plain properties, offers weaker type safety, and makes complex validation, dynamic fields, and testing considerably harder than the reactive forms API, which is why most non-trivial forms in production Angular apps use FormGroup/FormControl instead.
[(ngModel)]FormGroupFormControl
3
A common follow-up is asking you to write the desugared form yourself — [ngModel]="name" (ngModelChange)="name = $event" — to prove you understand the banana-in-a-box syntax generally, not just as a fixed incantation tied to forms.
[ngModel]="name" (ngModelChange)="name = $event"