How do you create and use Signals in Angular?

Signals in Angular are reactive primitives that track and propagate changes efficiently, updating dependent parts of the application automatically.

You create signals using Angular’s signal() function, update their values reactively, and use them in components or templates to reflect changes without manual change detection.

Code

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

const count = signal(0);

count.set(1);
console.log(count()); // outputs 1

count.update(c => c + 1);
console.log(count()); // outputs 2