javascript / intermediate
Snippet
Reaktiver Status mit Angular Signals
Signals bieten eine granulare Möglichkeit, Statusänderungen in Angular zu verfolgen. Dies ermöglicht dem Framework, die Change Detection zu optimieren, da es genau weiß, welche Teile der UI aktualisiert werden müssen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
Erklärung
1
count = signal(0);
Initialisiert ein beschreibbares Signal mit einem Startwert von 0.
2
doubleCount = computed(...);
Erstellt ein abgeleitetes Signal, das sich automatisch neu berechnet, wenn sich seine Abhängigkeiten ändern.
3
this.count.update(...);
Aktualisiert den Signalwert basierend auf seinem aktuellen Wert.