easyFrontend

What are the types of data binding in Angular?

Q: What are the types of data binding in Angular?

**Core concept.** There are four forms, defined by the **direction** of data flow. **Interpolation** {{ }} and **property binding** [prop] push data from the component **to the view**. **Event binding** (event) sends events from the view **to the component**. **Two-way binding** [(ngModel)] does both at once. Component View (DOM) <line class='d-edge-accent' x1='160' y1='74' x2='29

81 views

Understand the problem

List the data binding mechanisms.

data-binding

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

All four binding forms

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>{{ title }}</h3>                      <!-- interpolation -->
    <button [disabled]="busy">Save</button>   <!-- property binding -->
    <button (click)="busy = !busy">Toggle</button> <!-- event binding -->
    <input [(ngModel)]="title" />             <!-- two-way (needs FormsModule) -->
  `,
})
export class AppComponent {
  title = 'Hello';
  busy = false;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the fixture.detectChanges() method in Angular testing, and when should you call it?

What is the difference between @ViewChildren and @ViewChild?