Angular Signals yaj

Angular change detection poH ngoq: component tree Hoch legh vay' qaS (event, timer, HTTP response). Signals zone-based sweep choH: reactive values Sov template pIm Dung. Dung neH update.

Signals Qagh Qotlh

Angular Zone.js lo' async APIs (setTimeout, addEventListener, fetch) patch. change detection qaSDI' Sov. 'ach nuq choH Sovbe'. vaj root vo' component Hoch legh, old value new value reference rap. OnPush component skip (@Input() reference choHbe'), 'ach opt in poQ 'ej new object/array reference reH chenmoH poQ.

// Without OnPush: this component gets re-checked on every zone event,
// anywhere in the app, whether count actually changed or not
@Component({
  selector: 'app-counter',
  template: `<p>Count: {{ count }}</p>`,
})
export class CounterComponent {
  count = 0;
}

signal reactive container ghaH

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

const count = signal(0);

console.log(count()); // 0 — signals are read by calling them as functions
count.set(1);
count.update((n) => n + 1);
console.log(count()); // 2

getter/setter syntax Dun pagh: signal reactive context (template, computed(), effect()) Daq laD vaj context dependent registers. signal choH vaj Angular template 'ej computation Sov, Zone.js guess poQbe'.

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  increment() {
    this.count.update((n) => n + 1);
  }
}

computed() derived state

computed() signal chenmoH, value signals pIm vo' derive. dependency choHDI' neH recalculate.

const price = signal(29.99);
const quantity = signal(3);

const total = computed(() => price() * quantity());

console.log(total()); // 89.97
quantity.set(5);
console.log(total()); // 149.95

computed() lazy 'ej memoized: laD Hoch recompute pagh. total() cha'logh laD (price quantity choHbe') cached value nob.

effect() side effects

signal choHDI' Qu' poQ - log, localStorage sync, animation. effect() 'oH:

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

const theme = signal<'light' | 'dark'>('light');

effect(() => {
  document.body.className = theme(); // reruns whenever theme() changes
  localStorage.setItem('theme', theme());
});

effect() wa'logh Qu' dependency set. signal laD choHDI' Qu' pIm. computed() rap, dependency tracking automatic - dependency array ghItlh pagh; framework signals laD Sov.

Signals 'ej OnPush rap Qu'

component template signals lo' vaj fine-grained updates. OnPush manual pagh, immutable reference manual pagh. signals choHbe' vaj Angular component skip.

@Component({
  selector: 'app-cart-total',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Total: {{ total() | currency }}</p>`,
})
export class CartTotalComponent {
  price = input.required<number>();
  quantity = input.required<number>();
  total = computed(() => this.price() * this.quantity());
}

input() (signal-based input API) @Input() bindings signals chenmoH. parent update vaj computed() template Daq jaH, ngOnChanges comparison pagh.

Signals Dochmey pagh choH

Signals synchronous reactive state. RxJS Observable choHbe' - async event streams (HTTP response, WebSocket message, input stream debounce/switchMap). toSignal() 'ej toObservable() tu'lu': cha' model Dun. async event streams Observable; current value template legh signal.

yaj

Zone.js change detection "vay' qaS'a'?" jey 'ej Hoch legh. Signals choH: signal Hoch Sov computation 'ej template pIm. update targeted. 'oH zoneless mode Qu'laH - signals change detection pIm vaj Zone.js patch pagh.