Understanding Angular Data Binding (One-Way, Two-Way, Event Binding)

Introduction

Data binding is one of the core features that makes Angular powerful. It controls how data flows between:

• The TypeScript class (component logic)

• The HTML template (UI)

As a developer, you must understand how Angular synchronizes data between UI and code because this is how you build dynamic and interactive applications.

In this article, we will explore the different types of data binding in Angular using a real-world example.

Real-World Scenario: Building a Customer Profile Form

Imagine we are building a small screen in an application where a user can:

• View their name and age

• Update information in a form

• Click a button to show entered data

To achieve this, we need different types of data binding techniques.

Types of Data Binding in Angular

Angular supports four types of data binding:

1. Interpolation (One-way: Component to View)

2. Property Binding (One-way: Component to View)

3. Event Binding (One-way: View to Component)

4. Two-Way Binding (Component ↔ View)

1. Interpolation

Interpolation displays dynamic values from the component class into the HTML template using double curly braces.

Example

export class AppComponent {
  customerName: string = "Rajesh";
  age: number = 28;
}

HTML

<p>Customer Name: {{ customerName }}</p>
<p>Age: {{ age }}</p>

This is one-way data binding from component to UI.

2. Property Binding

Property binding binds a DOM property to a component property.

Example: Disable a button based on a condition.

export class AppComponent {
  isDisabled = true;
}

HTML

<button [disabled]="isDisabled">Submit</button>

Here, [disabled] binds the component value to the button property.

3. Event Binding

Event binding allows the UI to send data back to the component using events such as click, input, change, keyup, etc.

Example

export class AppComponent {
  message: string = "";

  showAlert() {
    this.message = "Button clicked successfully.";
  }
}

HTML

<button (click)="showAlert()">Click Me</button>
<p>{{ message }}</p>

The (click) triggers the method inside the component.

4. Two-Way Data Binding

Two-way binding keeps the component and template synced automatically.

Angular uses the [(ngModel)] directive from FormsModule.

Step 1: Import FormsModule in app.module.ts.

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule],
})
export class AppModule {}

Component

export class AppComponent {
  customerName: string = "Rajesh";
}

HTML

<input type="text" [(ngModel)]="customerName" />
<p>Updated Name: {{ customerName }}</p>

Typing in the input instantly updates the UI and variable.

Summary Table

Binding Type	Direction	Syntax	Example Use
Interpolation	Component → View	{{ value }}	Displaying dynamic text
Property Binding	Component → View	[property]="value"	Disable/enable button, set values
Event Binding	View → Component	(event)="method()"	Click, keyup, input actions
Two-way Binding	Component ↔ View	[(ngModel)]="value"	Forms and editable fields

Mini Practical Assignment

Create a small form with these fields:

• Name (two-way binding)

• Email (two-way binding)

• A button that shows the entered values using event binding

• A disabled submit button using property binding until both values are entered

This ensures you fully understand all data binding concepts.

Final Output (Expected Behavior)

• Default name shown using interpolation

• User can type and update dynamically using two-way binding

• A button triggers a message using event binding

• Submit button stays disabled using property binding logic