Roadmap › Angular (2 → 21) › Module: Signals, Change Detection and State
Lessons in this course (16)

9. Signals

Intermediate★ Must knowLesson 9 of 16
ts
count = signal(0);                                   // writable signal
double = computed(() => this.count() * 2);           // derived, memoised, lazy
constructor() {
  effect(() => console.log("count is", this.count()));   // side effects when dependencies change
}
increment() { this.count.update(c => c + 1); }        // or .set(5)

// Interop with RxJS
orders = toSignal(this.orderService.list(), { initialValue: [] });
count$ = toObservable(this.count);

// linkedSignal: writable state that resets when a source changes (v19)
selectedId = linkedSignal(() => this.orders()[0]?.id);

// resource: async data as signals (v19, experimental → evolving)
user = resource({ params: () => ({ id: this.userId() }), loader: ({ params }) => fetchUser(params.id) });

Signals tell Angular exactly which components depend on which state, enabling fine-grained, zoneless change detection. Read a signal by calling it: count(). Signal inputs (input()), outputs (output()), model() for two-way, and viewChild()/contentChild() queries are signal-based too.