Two-way binding with ngModel in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is two-way binding in Angular?

Two-way binding means the UI and the component data stay in sync. When the user changes the input, the component updates. When the component data changes, the UI updates automatically.

beginner

How do you use ngModel for two-way binding in Angular?

Use [(ngModel)]="propertyName" on an input element. The square brackets bind the property to the input, and the parentheses listen for changes, creating two-way binding.

beginner

What module must you import to use <code>ngModel</code> in Angular?

You must import <code>FormsModule</code> from <code>@angular/forms</code> in your Angular module to use <code>ngModel</code>.

intermediate

What does the syntax [(ngModel)]="name" mean?

It combines property binding [ngModel]="name" and event binding (ngModelChange)="name = $event" to keep the variable name and the input field in sync.

beginner

Why is two-way binding useful in forms?

Two-way binding makes it easy to keep form inputs and component data synchronized without writing extra code to listen for changes or update the UI manually.

Which Angular directive enables two-way binding on form inputs?

A ngClass

B ngIf

C ngModel

D ngFor

ngModel is used for two-way binding in Angular forms.

What must you import to use ngModel in your Angular app?

A BrowserModule

B FormsModule

C HttpClientModule

D ReactiveFormsModule

FormsModule must be imported to use ngModel.

What does the syntax [(ngModel)]="userName" do?

A Creates two-way binding between userName and input

B Listens for changes only

C Binds userName to input only

D Creates a one-time binding

This syntax creates two-way binding between the variable and the input field.

If you change the input bound with [(ngModel)], what happens?

A The input resets

B Nothing changes

C You must manually update the variable

D The component variable updates automatically

Two-way binding updates the component variable automatically when input changes.

Which of these is NOT true about two-way binding with ngModel?

A It requires manual event listeners

B It keeps UI and data in sync

C It uses <code>[( )]</code> syntax

D It works with FormsModule imported

Two-way binding does NOT require manual event listeners; it handles syncing automatically.

Explain how two-way binding works with ngModel in Angular.

Think about how changes in the input and variable reflect each other.

Describe why two-way binding is helpful when building forms in Angular.

Consider what happens when a user types in a form field.