Change Detection
Angular "Zone.js" use karta hai automatically DETECT karne ke liye ki KAB DOM update karna hai (async events — click, HTTP response, setTimeout — sab "zone" ke andar chalते hain, Angular ko notify karte hain). DEFAULT change detection HAR event ke baad POORE component tree ko check karta hai — SIMPLE lekin potentially SLOW bade apps mein.
ChangeDetectionStrategy.OnPush ek PERFORMANCE optimization hai — component SIRF TAB re-check hota hai jab uske @Input REFERENCE change ho (naya object/array), ya EVENT usi component ke andar trigger ho. Bade, complex apps mein SIGNIFICANT performance improvement deta hai.
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-user-card',
template: '<p>{{ user.name }}</p>',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserCardComponent {
@Input() user: any;
}
// GALAT — OnPush ke saath ye UI update NAHI karega:
// this.user.name = 'Naya Naam'; // SAME reference, mutate kiya
// SAHI — naya reference dो:
// this.user = { ...this.user, name: 'Naya Naam' }; // NAYA object- Zone.js = async events detect karके change detection trigger karta hai
- Default strategy = poora tree check, simple but potentially slow
- OnPush = sirf @Input reference change par re-check, performance boost
ChangeDetectorRef service se change detection ko MANUALLY control kar sakte ho — detectChanges() (turant check karo), markForCheck() (OnPush component ko "check karne layak" mark karo), detach() (automatic checking ROKO).
import { ChangeDetectorRef } from '@angular/core';
export class LiveDataComponent {
constructor(private cdr: ChangeDetectorRef) { }
onExternalDataUpdate(data: any) {
this.data = data;
this.cdr.markForCheck(); // OnPush component ko manually "notify" karo
}
}NgZone.runOutsideAngular() se code ko Angular ke change detection se BAHAR chalाया ja sakta hai — PERFORMANCE-CRITICAL operations (jaise animations, frequent mouse-move handlers) ke liye, jaha change detection HAR baar trigger karна WASTEFUL hai.
import { NgZone } from '@angular/core';
export class AnimationComponent {
constructor(private ngZone: NgZone) { }
startAnimation() {
this.ngZone.runOutsideAngular(() => {
// Ye animation loop change detection TRIGGER nahi karega
requestAnimationFrame(this.animate);
});
}
}