Course Progress 82%

Angular Signals and Reactive Rendering

← Control Flow Angular Dynamic Components →

Modern Angular (v16+) में Signals एक fundamental shift हैं जिस तरह से framework state, reactivity और rendering को handle करता है। Signals का उद्देश्य Angular को more predictable, more performant और fine-grained reactive system देना है, बिना RxJS को हटाए।

यह chapter advanced users के लिए यह clear करेगा कि Signals क्या हैं, कैसे काम करते हैं, change detection से उनका क्या relation है, और reactive rendering कैसे fundamentally improve होता है।

What Problem Signals Solve

Traditional Angular में:

  • State mostly class properties में होती है
  • Change detection zone-based है
  • UI update अक्सर component-wide check पर depend करता है
  • RxJS powerful है, लेकिन UI state के लिए heavy हो सकता है

Signals introduce करते हैं:

  • Explicit reactive state
  • Automatic dependency tracking
  • Fine-grained DOM updates
  • Zone-less future की foundation

What Is a Signal

Signal एक reactive value container है।
जब signal की value change होती है, Angular automatically उन templates और computations को update करता है जो उस signal पर depend करते हैं।

Creating a Signal

import { signal } from '@angular/core';

count = signal(0);

यहाँ count कोई normal number नहीं है, बल्कि एक reactive wrapper है।

Reading a Signal

<p>Count: {{ count() }}</p>

Signal को read करने के लिए function call syntax (count()) use होता है।
यह Angular को बताता है कि template इस signal पर depend करता है।

Updating a Signal

Direct Update

this.count.set(1);

Update Based on Previous Value

this.count.update(value => value + 1);

यह approach thread-safe और predictable है।

Why Signals Use Function Syntax

Signals function syntax इसलिए use करते हैं क्योंकि:

  • Dependency tracking automatic हो सके
  • Angular जान सके कौन सा computation किस signal पर depend करता है
  • Getter calls compile-time analyze किए जा सकें

यह design React hooks या Vue refs से अलग लेकिन ज्यादा explicit है।

Computed Signals

Computed signals derived state के लिए use होते हैं।

import { computed } from '@angular/core';

price = signal(100);
quantity = signal(2);

total = computed(() => this.price() * this.quantity());

यहाँ total automatically recalculate होगा जब price या quantity बदले।
Manual subscription या cleanup की ज़रूरत नहीं।

Template usage:

<p>Total: {{ total() }}</p>

Effects

Effects side-effects handle करने के लिए होते हैं।

import { effect } from '@angular/core';

effect(() => {
  console.log('Count changed:', this.count());
});

जब भी count बदलेगा, effect automatically run होगा।

Use cases:

  • Logging
  • Local storage sync
  • API calls triggered by state change

Signals vs RxJS Observables

Signals और RxJS competitors नहीं हैं, बल्कि complementary हैं।

Key differences:

  • Signals synchronous होते हैं
  • Observables asynchronous streams होते हैं
  • Signals UI state के लिए ideal हैं
  • RxJS events, HTTP, WebSocket के लिए best है

Angular provide करता है interop utilities जैसे:

  • toSignal()
  • toObservable()

Reactive Rendering in Templates

Signals के साथ Angular template rendering dependency-driven हो जाती है।

@if (count() > 0) {
  <p>Positive</p>
}

Angular सिर्फ उसी block को re-render करेगा जो count पर depend करता है।
पूरे component का change detection run नहीं होता।

Signals and Change Detection

Signals Angular के traditional change detection model को bypass नहीं करते, बल्कि refine करते हैं।

Important points:

  • Signal updates synchronous होते हैं
  • Only affected bindings update होते हैं
  • OnPush components में signals naturally fit होते हैं
  • Zone-less Angular का foundation signals ही हैं

Writable vs Readonly Signals

count = signal(0);

readonlyCount = this.count.asReadonly();

Readonly signals child components को pass किए जा सकते हैं ताकि state mutation controlled रहे।

Signals in Component Communication

Parent component:

counter = signal(0);

Child component input:

@Input({ required: true })
count!: Signal<number>;

Template:

<p>{{ count() }}</p>

यह pattern traditional @Input() से ज्यादा reactive और predictable है।

Signals and Services

Signals सिर्फ components तक limited नहीं हैं।

@Injectable({ providedIn: 'root' })
export class CounterService {
  count = signal(0);
}

Service-level signals global reactive state की तरह behave करते हैं, बिना heavy state management libraries के।

Performance Characteristics

Signals enable करते हैं:

  • Fine-grained DOM updates
  • Zero unnecessary change detection
  • Predictable rendering paths
  • Better memory management

Large applications में यह measurable performance gains देते हैं।

When Not to Use Signals

  • Heavy async data streams
  • Complex event orchestration
  • Cases जहाँ RxJS already perfect fit है

Signals UI state के लिए best हैं, async orchestration के लिए नहीं।

Signals as the Future of Angular

Angular roadmap के हिसाब से:

  • Signals core reactivity model बन रहे हैं
  • Control Flow syntax इनके ऊपर optimized है
  • Zone-less Angular officially target है

इसका मतलब है कि आने वाले Angular versions में signals central role निभाएँगे।

← Control Flow Angular Dynamic Components →
  • Home