Angular Two-Way Binding

Angular में Two-Way Binding का use component और template के बीच synchronized data के लिए किया जाता है। इसका मतलब है कि component property और template input दोनों एक-दूसरे के साथ automatically update होते हैं।

Two-way binding forms और user input-heavy applications के लिए बहुत useful है।

इस chapter में आप सीखेंगे:

• Two-way binding क्या है
• ngModel कैसे use करें
• Input fields, checkboxes और selects के लिए two-way binding
• Best practices

Two-Way Binding क्या है

Two-way binding में component property और input field value दोनों एक-दूसरे से linked होती हैं।

Angular syntax में इसे [(ngModel)] लिखा जाता है।

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userName: string = 'John Doe';
}

<!-- app.component.html -->
<input [(ngModel)]="userName" placeholder="Enter your name">
<p>Hello, {{ userName }}!</p>

Explanation

• [(ngModel)]="userName" two-way binding setup करता है
• Input field में typing automatically component property update करती है
• Component property change होने पर template भी auto-update होती है

FormsModule Import करना

Two-way binding use करने के लिए FormsModule import करना जरूरी है:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Explanation

• FormsModule provide करता है ngModel directive
• Without FormsModule, Angular error देगा

Two-Way Binding with Checkboxes

export class AppComponent {
  isSubscribed: boolean = true;
}

<label>
  <input type="checkbox" [(ngModel)]="isSubscribed">
  Subscribe to Newsletter
</label>
<p>Subscription status: {{ isSubscribed }}</p>

Explanation

• Checkbox checked/unchecked automatically isSubscribed update करता है
• Component property change template में reflect होती है

Two-Way Binding with Select Dropdown

export class AppComponent {
  selectedCountry: string = 'India';
  countries = ['India', 'USA', 'UK', 'Australia'];
}

<select [(ngModel)]="selectedCountry">
  <option *ngFor="let country of countries" [value]="country">{{ country }}</option>
</select>
<p>Selected Country: {{ selectedCountry }}</p>

Explanation

• Dropdown selection automatically selectedCountry update करता है
• Component property change template में reflect होती है

Two-Way Binding with Objects

export class AppComponent {
  user = { firstName: 'John', lastName: 'Doe' };
}

<input [(ngModel)]="user.firstName" placeholder="First Name">
<input [(ngModel)]="user.lastName" placeholder="Last Name">
<p>User: {{ user.firstName }} {{ user.lastName }}</p>

Explanation

• Objects के nested properties भी two-way bind हो सकते हैं
• Input changes component property को directly update करती हैं

Difference: One-Way vs Two-Way Binding

Feature	One-Way Binding	Two-Way Binding
Syntax	[property] / {{ }}	[(ngModel)]
Direction	Component → Template	Component ↔ Template
Use Case	Display data, readonly fields	Forms, inputs, interactive UI
Automatic Update	One direction only	Both directions automatically

Best Practices

• Two-way binding small and simple forms के लिए best है
• Complex forms और validation के लिए Reactive Forms use करें
• Always import FormsModule in module
• Avoid calling heavy logic inside ngModel

Summary

इस chapter में आपने सीखा:

• Two-way binding basics
• [(ngModel)] syntax और FormsModule import
• Inputs, checkboxes और selects में two-way binding
• Object properties के लिए two-way binding
• One-way vs two-way binding difference
• Best practices