Angular Data Binding

What Is Data Binding?

Data binding is the mechanism Angular uses to synchronize data between a component's TypeScript class and its HTML template. Angular supports binding data one-way (class to view, or view to class) and two-way (both directions at once).

Understanding which binding direction to use for a given situation is one of the most important skills when learning Angular templates.

@Component({
  selector: 'app-binding-demo',
  standalone: true,
  imports: [FormsModule],
  template: `
    <p>{{ message }}</p>
    <input [(ngModel)]="message" />
  `,
})
export class BindingDemoComponent {
  message = 'Hello';
}

Typing in the input updates message, and message updates the paragraph, a full two-way binding loop.

The Four Binding Forms

{{ expression }}            <!-- 1. Interpolation (class -> view) -->
[property]="expression"      <!-- 2. Property binding (class -> view) -->
(event)="statement"          <!-- 3. Event binding (view -> class) -->
[(ngModel)]="property"        <!-- 4. Two-way binding (both directions) -->

• Interpolation and property binding both flow data from the class into the view.
• Event binding flows data from the view (user actions) back into the class.
• Two-way binding combines a property binding and an event binding into one syntax.
• [(ngModel)] requires importing FormsModule (or ReactiveFormsModule for reactive forms).

Angular Data Binding Cheatsheet

Quick reference for every binding direction and its syntax.

One-Way Binding: Class to View

Interpolation and property binding both push data from the component out to the DOM. Interpolation is best for text content; property binding is required for anything that isn't plain text, like boolean attributes, images, or component inputs.

<img [src]="user.avatarUrl" [alt]="user.name" />
<button [disabled]="isSaving">Save</button>
<p [class.error]="hasError">{{ statusMessage }}</p>

One-Way Binding: View to Class

Event binding listens for DOM (or component) events and runs a class method in response, letting user interaction flow back into your application state.

<input (input)="onSearchInput($event)" />
<button (click)="deleteItem(item.id)">Delete</button>

Two-Way Binding With ngModel

[(ngModel)] is syntactic sugar Angular expands into a property binding plus an event binding under the hood. It keeps a form control and a class property perfectly in sync without writing the event handler yourself.

<!-- [(ngModel)]="name" desugars to roughly: -->
<input [ngModel]="name" (ngModelChange)="name = $event" />

You can build the same "banana in a box" pattern for your own components using input()/output() or @Input()/@Output() pairs named x and xChange.

Common Mistakes

• Using interpolation for non-string values (like boolean attributes), where property binding is required instead.
• Forgetting to import FormsModule when using [(ngModel)] in a standalone component.
• Overusing two-way binding for state that should flow one direction only, making data flow harder to trace.
• Mutating an object bound with [ngModel] in a way that doesn't trigger change detection as expected.

Key Takeaways

• Angular binding syntax determines the direction data flows: {{ }} and [ ] go class-to-view, ( ) goes view-to-class.
• Two-way binding ([( )]) combines both directions into a single, convenient syntax.
• Property, class, style, and attribute bindings each target a different kind of DOM value.
• [(ngModel)] needs FormsModule imported to work in templates.