Reactive State with Angular Signals

Snippet

Reactive State with Angular Signals

Signals provide a granular way to track state changes in Angular, allowing the framework to optimize change detection by knowing exactly which parts of the UI need updating.

snippet.js
javascript
import { Component, signal, computed } from '@angular/core';
 
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="increment()">Count: {{ count() }}</button>
    <p>Double: {{ doubleCount() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);
 
  increment() {
    this.count.update(value => value + 1);
  }
}

angular

Breakdown

count = signal(0);

Initializes a writable signal with a starting value of 0.

doubleCount = computed(...);

Creates a derived signal that automatically recalculates when its dependencies change.

this.count.update(...);

Updates the signal value based on its current value.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Reactive State with Angular Signals

Related