Advanced Angular
Signals
Modern Reactive Primitive (Angular 16+)
💡 Signal ek SMART DOORBELL jaisa hai — jab bhi value CHANGE hoti hai, sirf WOHI PARTS jo actually is value par depend karte hain, AUTOMATICALLY notify hote hain — traditional change detection (poora area check karo) se bahut zyada PRECISE aur EFFICIENT.
Signal (Angular 16+, STABLE 17+) ek NAYA reactive primitive hai — VALUE ko "wrap" karta hai, aur AUTOMATICALLY track karta hai KAHA use hua hai. Value change hone par, SIRF DEPENDENT parts update hote hain — Zone.js ki zaroorat KAM ho jaati hai, aur change detection zyada PRECISE/efficient ban jaati hai.
import { signal, computed } from '@angular/core';
export class CounterComponent {
count = signal(0); // signal banaओ, initial value 0
doubleCount = computed(() => this.count() * 2); // AUTOMATICALLY recompute hota hai
increment() {
this.count.update(value => value + 1); // value update karo
// ya: this.count.set(5); — directly set karo
}
}
// Template mein — signal ko FUNCTION ki tarah call karo:
// <p>Count: {{ count() }}</p>
// <p>Double: {{ doubleCount() }}</p>
// <button (click)="increment()">+1</button>📶
Signal ek SMART DOORBELL jaisa hai — jab bhi value CHANGE hoti hai, sirf WOHI PARTS jo actually is value par depend karte hain, AUTOMATICALLY notify hote hain — traditional change detection (poora area check karo) se bahut zyada PRECISE aur EFFICIENT.
1 / 6
⚡ Quick Recap
- signal(initialValue) = reactive value container
- computed(() => ...) = automatically derived, dependency-tracked value
- Template mein FUNCTION ki tarah call karo: count()
On this page (2 subtopics)
Signals SIMPLE, SYNCHRONOUS, component-level STATE ke liye best hain (jaise counter, form field value). RxJS Observables COMPLEX, ASYNCHRONOUS streams ke liye better hain (HTTP calls, WebSocket events, complex operator chains).
// Signal — simple, synchronous component state:
count = signal(0);
// Observable — async, complex operations:
users$ = this.http.get<User[]>('/api/users').pipe(
retry(2),
catchError(err => of([]))
);
// Interop — signal se Observable, ya Observable se signal:
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
usersSignal = toSignal(this.users$, { initialValue: [] });Tip: toSignal()/toObservable() interop functions Angular team ne DELIBERATELY diye hain — signals RxJS ko REPLACE nahi karते, BOTH ek saath, DIFFERENT use-cases ke liye COEXIST karте hain.
effect() ek FUNCTION run karta hai JAB BHI uske andar use hue SIGNALS change hote hain — logging, localStorage sync, ya doosre SIDE EFFECTS ke liye (jo template mein directly express nahi ho sakte).
import { effect, signal } from '@angular/core';
export class SettingsComponent {
theme = signal('light');
constructor() {
effect(() => {
console.log('Theme changed to: ' + this.theme());
localStorage.setItem('theme', this.theme());
// Har baar theme() change hone par, YE automatically chalता hai
});
}
}Tip: effect() ko constructor (ya injection context) ke ANDAR call karna ZAROORI hai — Angular ko pata hona chahiye component KAB destroy ho raha hai, taaki effect automatically CLEANUP ho sake.