What is data binding in Angular and what are its four forms?
Learn Angular data binding and its four forms — interpolation, property, event, and two-way binding — with syntax and examples to ace your interview.
Expected Interview Answer
Data binding in Angular is the automatic synchronisation of data between a component's class (the model) and its template (the view), and it comes in four forms: interpolation, property binding, event binding, and two-way binding.
Interpolation ({{ value }}) and property binding ([prop]='value') flow data from the component to the view. Event binding ((event)='handler()') flows data from the view back to the component. Two-way binding ([(ngModel)]='value') combines property and event binding so changes flow in both directions. Together they keep the UI and the underlying data consistent without manual DOM updates.
- Keeps view and model in sync automatically
- Removes manual DOM manipulation
- Clear syntax for each data direction
- Two-way binding simplifies forms
- Improves readability and maintainability
AI Mentor Explanation
Data binding is like the link between the scorebook and the giant scoreboard. Interpolation and property binding push the scorer's numbers out to the display; event binding is the umpire signalling back a decision that updates the record; two-way binding is a live system where the board and the book update each other instantly. Four channels keep every scorecard and screen perfectly in sync.
Step-by-Step Explanation
Step 1
Interpolation
Use {{ expression }} to render component data as text inside the template.
Step 2
Property binding
Use [property]='value' to bind a DOM or component property to component data.
Step 3
Event binding
Use (event)='handler()' to run component logic in response to user actions.
Step 4
Two-way binding
Use [(ngModel)]='value' to sync data both from and to the component simultaneously.
Step 5
Understand the flow
Remember: interpolation and property binding are component-to-view; event binding is view-to-component; two-way is both.
What Interviewer Expects
- The definition of data binding as model-view sync
- All four forms named correctly
- Correct syntax for each form
- The direction of data flow for each
- That two-way binding combines property and event binding
Common Mistakes
- Confusing property binding [] with event binding ()
- Forgetting that two-way binding needs FormsModule for ngModel
- Mixing up the direction of data flow
- Thinking interpolation can bind to element properties directly
Best Answer (HR Friendly)
“Data binding in Angular keeps the data in your code and what the user sees on screen in sync automatically. It has four types: showing text (interpolation), setting element properties, responding to user events, and two-way binding that updates both directions at once.”
Code Example
<!-- Interpolation -->
<p>{{ username }}</p>
<!-- Property binding -->
<img [src]="avatarUrl" />
<!-- Event binding -->
<button (click)="save()">Save</button>
<!-- Two-way binding -->
<input [(ngModel)]="username" />Follow-up Questions
- Which module must you import to use ngModel?
- What is the difference between interpolation and property binding?
- How does two-way binding work under the hood?
- Can you bind to custom component inputs and outputs?
- What is the difference between [] and () in bindings?
MCQ Practice
1. Which syntax represents two-way data binding?
The 'banana in a box' [(ngModel)] combines property and event binding for two-way sync.
2. Event binding in Angular uses which syntax?
Parentheses (event)='handler()' bind a template event to a component method.
3. Interpolation and property binding send data in which direction?
Both flow data from the component (model) to the template (view).
Flash Cards
What are the four data binding forms? — Interpolation, property binding, event binding, two-way binding.
Two-way binding syntax? — [(ngModel)]='value' — requires FormsModule.
Event binding syntax? — (event)='handler()' — view to component.
Property binding syntax? — [property]='value' — component to view.
Continue Learning
Related Interview Questions
What is two-way data binding and how does ngModel implement it?
medium
What is a component in Angular and what does its decorator contain?
easy
What are standalone components in Angular and why were they introduced?
medium
What is the difference between template-driven and reactive forms in Angular?
medium