Signal Basics in Angular
From the Angular cheat sheet · Signals (Angular 16+) · verified Jul 2026
Signal Basics
Creating and using signals for reactive state
typescript
// Creating signals
import { signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-counter',
template: \`
<p>Count: {{ count() }}</p>
<p>Double: {{ doubleCount() }}</p>
<button (click)="increment()">+</button>
\`
})
export class CounterComponent {
// Writable signal
count = signal(0);
// Computed signal (read-only)
doubleCount = computed(() => this.count() * 2);
increment() {
this.count.set(this.count() + 1);
// or: this.count.update(v => v + 1);
}
}💡 Signals provide fine-grained reactivity without Zone.js
⚡ Computed signals are memoized and only recalculate when dependencies change
📌 Effects run automatically when their signal dependencies change
🔥 Use signal inputs for better performance than traditional @Input