Signals are a reactivity primitive introduced in Angular to make state management more declarative, efficient, and explicit. They provide a new way to handle and react to changes in data, much like observables but with synchronous and fine-grained reactivity, ideal for template-driven UIs.<\/p>\n\n\n\n
Introduced in Angular 16, Signals aim to replace some use-cases of RxJS (like BehaviorSubject) in component state management by providing a simpler and zone-less reactivity model.<\/p>\n\n\n\n
A value is held inside a container that is referred to as a Signal:<\/strong><\/p>\n\n\n\n A signal behaves how a reactive variable does:<\/p>\n\n\n\n Angular provides three primary ways to work with signals:<\/p>\n\n\n\n Real-life Example: Counter Component with Signals<\/strong><\/p>\n\n\n\n\n
Analogy<\/h3>\n\n\n\n
\n
Types of Signals in Angular<\/h2>\n\n\n\n
Type<\/strong><\/td> Description<\/strong><\/td><\/tr> signal()<\/td> The basic writable signal. Used for storing values.<\/td><\/tr> computed()<\/td> A derived signal that computes values from other signals.<\/td><\/tr> effect()<\/td> A side-effect that runs automatically when dependent signals change.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Signal API Overview<\/h2>\n\n\n\n
Writable Signal \u2014 signal()<\/h4>\n\n\n\n
import { signal } from '@angular\/core';\n\nconst count = signal(0); \/\/ Creates a signal with initial value 0\n\ncount(); \/\/ GET: returns 0\ncount.set(10); \/\/ SET: changes value to 10\ncount.update(v => v + 1); \/\/ Increments count<\/code><\/pre>\n\n\n\nComputed Signal \u2014 computed()<\/h4>\n\n\n\n
import { computed } from '@angular\/core';\n\nconst count = signal(2);\n\nconst double = computed(() => count() * 2);\n\nconsole.log(double()); \/\/ 4\n\ncount.set(5);\n\nconsole.log(double()); \/\/ 10 (automatically recalculates)<\/code><\/pre>\n\n\n\n\n
Effect \u2014 effect()<\/h4>\n\n\n\n
import { effect } from '@angular\/core';\n\nconst count = signal(0);\n\neffect(() => {\n console.log(`Count changed to: ${count()}`);\n});\n\ncount.set(5); \/\/ Automatically triggers the effect<\/code><\/pre>\n\n\n\n\n
import { Component, signal, computed, effect } from '@angular\/core';\n\n@Component({\n selector: 'app-counter',\n template: `\n <h2>Count: {{ count() }}<\/h2>\n <h3>Double: {{ doubleCount() }}<\/h3>\n <button (click)=\"increment()\">Increment<\/button>\n `\n})\nexport class CounterComponent {\n count = signal(0); \/\/ Writable signal\n\n doubleCount = computed(() => this.count() * 2); \/\/ Derived signal\n\n constructor() {\n effect(() => {\n console.log('Count updated to:', this.count());\n });\n }\n\n increment() {\n this.count.update(c => c + 1);\n }\n}<\/code><\/pre>\n\n\n\nKey Benefits of Signals<\/h3>\n\n\n\n