ReviseAlgo Logo

Fundamentals

Data Binding

Master Angular Data Binding, covering interpolation syntax, property bindings, event bindings, and two-way data bindings with ngModel.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master Angular data binding. By the end of this topic, you will be able to:

  • Explain the flow direction of interpolation, property binding, and event binding.
  • Render dynamic component property values using interpolation ({{ }}).
  • Bind HTML element attributes using property binding ([attribute]).
  • Capture user input events using event binding ((event)).
  • Implement two-way data binding using the bananas-in-a-box syntax ([(ngModel)]).

2. Overview

Data binding connects a component's TypeScript class logic with its HTML template view. It defines how data is passed between the logic and the template, ensuring the user interface updates automatically when component states change.

3. Why This Topic Matters

Understanding data binding helps prevent synchronization bugs and template compilation errors:

  • Unlinked FormsModule imports: If you use two-way data binding ([(ngModel)]) inside a component template but forget to import FormsModule in the component's imports array, compilation will fail with an "unknown property" error.
  • Property vs Attribute Binding Confusion: Attempting to bind custom element attributes (like [disabled]="isDisabled") using interpolation (e.g. disabled="{{isDisabled}}") can lead to parsing bugs, as the browser might treat the boolean value as a literal string.

4. Real-World Analogy

Think of data binding directions like **different communication flows in a smart office setup**:

  • Interpolation / Property Binding (The Manager's Megaphone): Communication flows one-way, from the manager's office (component logic) to the staff room floor (HTML template view). The staff displays whatever instructions are read out.
  • Event Binding (The Suggestion Box): Communication flows one-way, from the staff room floor (HTML templates) to the manager's office (component logic). When an event occurs (a button click), a message is sent to the manager.
  • Two-Way Binding (Walkie-Talkie conversation): Communication flows in both directions simultaneously. If the manager changes their mind, the staff's copy updates instantly. If the staff updates a value, the manager's state updates as well.

5. Core Concepts

Angular provides four forms of data binding based on data flow direction:

  • Interpolation: {{ value }}. One-way from component to template. Inserts text content.
  • Property Binding: [property]="value". One-way from component to element property. Sets element attributes or component input bindings.
  • Event Binding: (event)="handler()". One-way from template to component. Triggered by user events (like clicks or keyboard inputs).
  • Two-Way Binding: [(ngModel)]="value". Bidirectional data flow. Synchronizes template inputs with component properties automatically.
Binding Type Syntax Example Flow Direction
Interpolation <p>{{ title }}</p> Component class → Template View
Property Binding <button [disabled]="isPending"> Component class → Template View
Event Binding <button (click)="save()"> Template View → Component class
Two-Way Binding <input [(ngModel)]="email" /> Component class ↔ Template View

6. Syntax & API Reference

Below is a standalone component that uses all four types of data binding:

7. Visual Diagram

This diagram displays how data flows between component logic and template views:

8. Live Example — Full Working Code

Below is a reactive counter component that implements property and event bindings:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the counter increment step size and add a reset button using event binding.
  2. Test what happens when you type text into the two-way data binding input field and look at the output paragraph.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Forgetting FormsModule for ngModel Attempting to use two-way data binding ([(ngModel)]) in the template without importing FormsModule in the component's imports array. <input [(ngModel)]="email" /> (No FormsModule imported) Add FormsModule to the component's imports array.
Confusing parentheses and brackets Mixing up the syntax for property binding and event binding, resulting in syntax errors. <button [click]="submit()"> <button (click)="submit()">

11. Best Practices

  • Use property binding instead of interpolation for element attributes: Use property binding ([src]="url") instead of interpolation (src="{{url}}") to bind non-string values.
  • Import only required forms packages: Only import FormsModule when your component requires two-way data binding.
  • Keep event handler logic inside the class: Avoid writing complex expressions directly inside template event handlers. Call a component class method instead.

12. Browser Compatibility/Requirements

Angular data binding uses standard event listeners and property accessors, ensuring compatibility with all modern desktop and mobile browsers.

13. Interview Questions

🟢 Q1: Explain the difference between property binding and attribute binding in Angular.

Answer: Property binding target DOM properties (like [disabled] or [textContent]), which are values on the DOM node objects. Attribute binding ([attr.name]) targets HTML element attributes, which are values defined in the raw HTML markup. Property binding is generally preferred because DOM properties are type-safe and update faster than attributes.

14. Debugging Exercise

Identify and fix the compiler error in this template fragment:

View Solution

Diagnosis:
1. The event binding (click)="increaseCounter" is missing parentheses on the method call. Event handlers require a method invocation expression (e.g. increaseCounter()).
2. The paragraph tag attempts to render the score variable using property binding syntax ([score]) inside plain text. Use interpolation ({{ score }}) to render values directly in text content.

Fixed template markup:

15. Practice Exercises

Exercise 1: Building a toggler button

Build a component containing a button that toggles a boolean variable (isVisible) between true and false. Display a paragraph tag only when the variable is true.

16. Scenario-Based Challenge

The Multi-Step Registration Form challenge:

You must build a multi-step user signup form wizard. The 'Next' button should remain disabled until the user enters their username and email. Write a component template using property, event, and two-way bindings to handle this form validation.

17. Quick Quiz

Q1: Which syntax represents two-way data binding in Angular?

A) [ngModel]

B) (ngModel)

C) [(ngModel)]

Answer: C — The banana-in-a-box syntax [(ngModel)] represents two-way data binding.

18. Summary & Key Takeaways

  • • Interpolation and property binding pass data one-way from the component class to the template view.
  • • Event binding passes messages from the template to the component in response to user actions.
  • • Two-way binding synchronizes template inputs with component properties in both directions.

19. Cheat Sheet

Binding Type Syntax Format
Two-Way Binding [(ngModel)]="propertyName"
---