Angular Data Binding Types
Fast recall
Quick revision
Core answer
Whether you can name all four binding types and their directions, and pick the right one for a given need (display vs set vs react vs sync).
Using only interpolation and missing property/event binding, or confusing the bracket directions ([prop] is in, (event) is out).
Four types: interpolation ({{ }} display), property ([prop] set), event ((event) react), two-way ([(ngModel)] sync). Know the direction of each.
Interview-ready guide
Interview answer
Angular has four data binding types that connect the component to the template.
Interpolation, the double curly braces, flows one-way from component to view to display a value. Property binding, the square brackets, sets a DOM or component property one-way from component to view. Event binding, the parentheses, flows one-way from view to component when an event fires.
And two-way binding, the banana-in-a-box syntax, combines both to keep an input and a component property in sync. The bracket notation encodes the direction: square brackets mean target a property, data in; parentheses mean listen to an event, data out; and both together mean two-way.
Use interpolation for display, property binding for setting attributes and inputs, event binding for reacting to user actions, and two-way for form inputs that update state. The common mistakes are confusing the bracket directions and using two-way binding without importing the FormsModule, which ngModel requires.
Angular Data Binding Types
Direct Answer
Angular has four binding types: interpolation ({{ }}) displays a component value in the template one-way; property binding ([prop]="expr") sets a DOM/component property one-way; event binding ((event)="handler") listens for DOM/component events and runs a handler; two-way binding ([(ngModel)]="prop") binds both directions, syncing input and a component property. Interpolation and property binding are one-way (component → view); event binding is one-way (view → component); two-way combines both. Use interpolation for display, property for setting attributes/inputs, event for reacting to user actions, and two-way for form inputs that update state.
Code Example
// (1) INTERPOLATION: one-way component -> view (display).
<p>Hello, {{ name }}</p>
// (2) PROPERTY BINDING: one-way component -> view (set a property).
<img [src]="user.avatarUrl" [alt]="user.name"> // sets DOM attributes
// (3) EVENT BINDING: one-way view -> component (react).
<button (click)="save()">Save</button>
<input (input)="onInput($event)">
// (4) TWO-WAY BINDING: both directions (sync an input with a property).
<input [(ngModel)]="name"> // name updates when typing; input shows name
// [(ngModel)] is sugar for [ngModel]="name" (ngModelChange)="name=$event".
Common Mistakes & Pitfalls
- Forgetting that [ ] is property (data in) and ( ) is event (data out) — the brackets encode direction.
- Using interpolation where property binding is needed (can't bind to non-string properties via {{ }}).
- Two-way binding without importing FormsModule (ngModel requires it).
Check your understanding
Answer these without looking back at the article.
- What are the four binding types, and which direction does each flow?
- What's the difference between interpolation and property binding, and when would you use each?
- What does the syntax [ ] vs ( ) vs [( )] tell you about the binding direction?
- What does two-way binding require (FormsModule), and what is it sugar for?
Looking for a structured roadmap?
Every module on this page is also part of the full Java backend interview track.