Data binding is the 'wiring' that connects your application's logic to its user interface, ensuring your data is always perfectly synchronized with the view.
1Interpolation vs Property Binding
While both project data into the view, they have different use cases. Interpolation ({{ }}) is strictly for converting values into strings and embedding them in text. Property Binding ([property]) is much more powerful; it allows you to pass actual data types (like booleans or objects) directly to DOM properties. Use interpolation for text content, and property binding for attributes like src, href, or custom component inputs.
2The Attribute Binding Exception
Sometimes, an HTML element has an attribute that doesn't map directly to a DOM property (like colspan in tables or ARIA attributes for accessibility). In these cases, regular property binding won't work. Angular provides the [attr.name] syntax as a workaround, allowing you to bind directly to the underlying HTML attribute instead of the JavaScript property.
3Step-by-Step Breakdown
Data Binding is the mechanism that coordinates the communication between a component's class and its template. It makes your UI dynamic.
The most common form is Interpolation. It uses double curly braces to project a class property's value into the text of the HTML.
Next is Property Binding. It allows you to bind a value to an element's property, like [src] for an image or [disabled] for a button.
Checkpoint: What syntax do we use to bind a value to an element's property (Property Binding)?
- →{{ property }}
- →[property]
- →(property)
While Property Binding works for DOM properties, sometimes you need to bind to HTML attributes. For that, we use the 'attr.' prefix.
All of these are 'One-Way' data bindings. Data flows from the TypeScript class (the Source) to the HTML (the Target).
Checkpoint: In Property Binding ([src]="url"), which way does the data flow?
- →From TS class to HTML view
- →From HTML view to TS class
Superb! You've mastered the art of projecting data into your views. Next, we'll see how to listen to user interactions with Event Binding.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Property Binding to `[attr.aria-*]` Is How You Make Dynamic State Accessible
A dynamically toggled panel needs its `aria-expanded` state bound to the same variable driving the visual change (e.g., `[attr.aria-expanded]="isOpen"`), not just a CSS class — otherwise assistive technology never learns the state changed at all.
2Two-Way Binding on Form Controls Still Needs a Real `<label>`
`[(ngModel)]` handles data synchronization, not accessibility — every bound input still needs a properly associated `<label for>` exactly as it would in plain HTML, since data binding and semantic markup are unrelated concerns.
SEO Implications
- 1
Interpolation and Property Binding Both Execute Client-Side by Default
Content rendered via `{{ }}` interpolation or `[property]` binding only exists in the DOM after Angular's JavaScript runs — for that content to be crawlable, server-side rendering (Angular Universal) must actually execute those bindings server-side too.
- 2
Event Bindings Driving Client-Only Navigation Can Create Unlinkable Content
If `(click)` handlers change displayed content without updating the URL via the Router, that content has no unique, shareable, or indexable URL — prefer route-based navigation over pure event-driven view swaps for anything that should be independently linkable.
Best Practices
Prefer One-Way Data Flow Except Where Two-Way Binding Genuinely Simplifies Form Handling
Two-way binding (`[(ngModel)]`) is convenient for simple forms, but for complex state, explicit one-way property binding plus event binding makes data flow easier to trace and debug than implicit two-way synchronization.
Avoid Calling Functions Directly Inside Interpolation Bindings
`{{ calculateTotal() }}` re-executes on every single change detection cycle, potentially many times per user interaction — compute the value once (in a getter backed by memoization, or ahead of time) rather than calling an expensive function inline in the template.
Frequent Bugs
A value shown via `{{ getValue() }}` in the template causes severe performance issues as the app grows.
Calling a method directly inside interpolation re-invokes it on every change detection cycle — potentially hundreds of times per second during animations or rapid input. Replace it with a plain property, a memoized getter, or an `OnPush`-compatible computed value passed as a normal binding.
`[(ngModel)]` throws an error saying it can't bind to `ngModel` on an element.
The `FormsModule` (or `ReactiveFormsModule` for reactive forms) hasn't been imported into the relevant module or standalone component — `ngModel` is not a core Angular directive and requires its providing module to be explicitly imported.
Real-World Examples
Accessible Toggle With Bound ARIA State
An expandable FAQ item binds its visual open/closed state and its `aria-expanded` attribute to the same boolean, ensuring sighted and screen reader users perceive the exact same state.
<button (click)="isOpen = !isOpen" [attr.aria-expanded]="isOpen">
{{ isOpen ? 'Hide details' : 'Show details' }}
</button>