Angular Signals

(Developer Preview, Still In Development)

Allows developers to define Reactive values and provide dependencies for updating the same.

As of now, Angular using Zone.JS for change detection but Angular Signals Feature will make Zone.js optional in future releases.

Signals are a primitive reactive system in Angular. Means, Signals can be used in the component but also outside like services.

Benefits-
As of now change detection is fully controlled and automatic by Zone.JS. With use of Angular Signals, Developer will get greater control on reactivity and change detection.

//create variables with signal

count = signal<number>(0);


// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());

// To change the value of a writable signal, you can either .set() it directly:
count.update(value => value + 1);


const todos = signal([{title: 'Learn signals', done: false}]);

todos.mutate(value => {
  // Change the first TODO in the array to 'done: true' without replacing it.
  value[0].done = true;
});

Computed

The calculated signals allow to creation derived signals from other dependency signals.

const person = signal<{ firstname: string; lastname: string}>({ firstname: 'Anil', lastname: 'Verma'})

// Automatically updates when person() change;
const presentation = computed(() => ${person().firstname}${person().lastname}`;

RxJS interoperability

Easily “lift” signals to observables using functions from @angular/core/rxjs-interop

import { toObservable, signal } from '@angular/core/rxjs-interop';

@Component({...})
export class App {
  count = signal(0);
  count$ = toObservable(this.count);

  ngOnInit() {
    this.count$.subscribe(() => ...);
  }
}