Data Binding
Property binding [property]="value" — component data ko HTML element property se JODता hai (jaise [disabled]="isLoading"). Event binding (event)="handler()" — user interactions (click, input) ko component method se JODता hai. Two-way binding [(ngModel)]="value" — dono ek saath, form inputs ke liye bahut common.
// Property binding — component → template:
// <img [src]="imageUrl">
// <button [disabled]="isLoading">Submit</button>
// Event binding — template → component:
// <button (click)="onSubmit()">Submit</button>
// <input (keyup)="onKeyUp($event)">
// Two-way binding — dono directions:
// <input [(ngModel)]="userName">
// Jab user type kare, userName update hota hai
// Jab userName (code se) change ho, input bhi update hota hai- [property]="value" = property binding (component → template)
- (event)="handler()" = event binding (template → component)
- [(ngModel)]="value" = two-way binding, forms ke liye common
Property binding ([property]) DOM PROPERTY set karta hai (JavaScript object property). Attribute binding ([attr.name]) HTML ATTRIBUTE set karta hai — zyadatar cases mein property binding kaafi hai, lekin kuch HTML attributes (jaise colspan, aria-*) ka koi corresponding DOM property nahi hota, unke liye attr. zaroori hai.
// Property binding (zyadatar cases):
// <img [src]="imageUrl">
// Attribute binding (jab koi DOM property nahi hoti):
// <td [attr.colspan]="columnCount"></td>
// <button [attr.aria-label]="buttonLabel"></button>[class.name] conditionally ek CSS class toggle karta hai. [style.property] directly ek CSS style set karta hai — dynamic styling ke liye common, especially conditional states (active, error, disabled) ke liye.
// Conditional class:
// <div [class.active]="isActive">Content</div>
// isActive true ho to "active" class add hoti hai
// Multiple classes (object syntax):
// <div [ngClass]="{ 'active': isActive, 'error': hasError }">
// Direct style:
// <div [style.color]="isError ? 'red' : 'black'">Text</div>