Angular Signals Introduction (Modern State)

Signals are Angular’s modern way to manage state. They make UI updates more predictable and often reduce the amount of RxJS code you need for local state. ## What problem do Signals solve? In many apps, developers used: - component properties (simple but limited) - RxJS Subjects/BehaviorSubjects (powerful but sometimes heavy for basic UI state) Signals sit in the middle: - easier than Subjects for UI state - still reactive, still fast - updates automatically refresh templates ## Create your first signal ```ts import { Component, signal } from '@angular/core'; @Component({ selector: 'app-counter', standalone: true, template: ` <h2>Counter: {{ count() }}</h2> <button (click)="inc()">Increase</button> `, }) export class CounterComponent { count = signal(0); inc() { this.count.update(v => v + 1); } } ``` ### Notice something new You read a signal like a function: `count()` This tells Angular: “track this value and update UI if it changes.” ## set vs update ```ts this.count.set(10); // replace value this.count.update(v => v + 1); // compute next value ``` ## Where Signals are best - UI state: toggles, filters, selected tabs - local component state that drives the view - derived UI values (with computed, next lesson) > Next: computed() and effect() to build real reactive logic.