Angular Data Binding — Interview Quick Revision

1. What is data binding in Angular?

Data binding connects the component's TypeScript data with the HTML template. It allows data to flow between the component and the UI.

2. What are the different types of data binding?

Angular mainly supports Interpolation, Property Binding, Event Binding, and Two-Way Binding.
{{ }}, [property], (event), [(ngModel)]

3. What is interpolation?

Interpolation displays component data as text in the HTML template using {{ }}.
<h1>Welcome {{ userName }}</h1>

4. What is property binding?

Property binding sends data from the component to an HTML element, directive, or child component property.
<img [src]="imageUrl">

5. What is event binding?

Event binding sends an event from the template to the component when a user action occurs.
<button (click)="save()">Save</button>

6. What is two-way data binding?

Two-way binding allows data to flow in both directions: component → view and view → component.
<input [(ngModel)]="userName">

7. What is [(ngModel)]?

[(ngModel)] provides two-way binding for form controls. In standalone components, import FormsModule in the component's imports.
<input [(ngModel)]="name">

8. What is the difference between interpolation and property binding?

Interpolation: mainly displays values as text → {{ name }}.
Property binding: binds values to DOM/component properties → [src]="imageUrl".

9. What is the difference between property binding and event binding?

Property binding: Component → View, using [ ].
Event binding: View → Component, using ( ).

10. What is the difference between one-way and two-way data binding?

One-way: data flows in one direction, such as [value] or (click).
Two-way: data flows in both directions using [()], commonly [(ngModel)].