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.