Die standardmäßige Änderungserkennung (Change Detection) von Angular funktioniert in den meisten Anwendungen reibungslos. Sie sorgt automatisch dafür, dass das HTML aktualisiert wird, sobald sich etwas im Datenmodell ändert. Das passiert ganz ohne zusätzlichen Aufwand. Besondere Anweisungen sind nicht erforderlich um die Benutzeroberfläche mit den Daten synchron zu halten. Diese Bequemlichkeit hat jedoch einen Preis: Jedes Mal, wenn ein Ereignis eintritt, zum Beispiel ein Klick auf eine Schaltfläche, ein Timer oder eine HTTP-Antwort, überprüft Angular sämtliche Komponenten der Anwendung, um mögliche Änderungen zu erkennen. In kleineren oder mittelgroßen Projekten fällt dies kaum ins Gewicht. In umfangreichen Anwendungen mit vielen Komponenten kann diese Vorgehensweise jedoch zu unnötigen Überprüfungen führen und die Leistung spürbar beeinträchtigen. Das folgende Listing zeigt eine einfache Angular-Komponente mit zwei Eigenschaften. Es sind id und count. Zusätzlich gibt es Methoden und diese Eigenschaften zu verändern. Der Wert von count kann erhöht und verringert werden während für id eine komplett neue Guid generiert wird.
import { Component } from '@angular/core'; @Component({ selector: 'app-simple-signal', standalone: true, imports: [], templateUrl: './simple-signal.component.html', styleUrl: './simple-signal.component.scss' }) export class SimpleSignalComponent { id: string = generateGuid(); count: number = 0; increment() { this.count++; } decrement() { this.count--; } setNewId() { this.id = generateGuid(); } } function generateGuid(): string { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { const r = Math.random() * 16 | 0; const v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }
Das HTML-Template dieser Komponente ist ebenfalls kurz und knapp. Die Eigenschaften werden angezeigt, und die Schaltflächen übernehmen die Aufgabe, die zuvor definierten Methoden auszulösen.
Simple Signal Demo
Id: {{ id }}Count: {{ count }}
Wie zuvor beschrieben, ist an dieser Stelle keine weitere Programmierung notwendig. Immer wenn eine der Schaltflächen angeklickt wird, ändert sich der zugehörige Wert automatisch. Um aber die Performance zu verbessern und gleichzeitig mehr Kontrolle über Aktualisierungen zu erhalten, bietet Angular die OnPush-Änderungserkennungsstrategie. Mit OnPush rendert das Framework eine Komponente nur dann neu, wenn sich eines ihrer input verändert oder die Änderungserkennung manuell ausgelöst wird. Dieser Ansatz reduziert überflüssige Prüfungen deutlich und sorgt für eine schnellere, besser vorhersehbare Anwendung. Eine weitere Möglichkeit die Änderungserkennung auszulösen sind Signale. Sie machen den Zustand von Komponenten auf präzise und effiziente Weise reaktiv. Ändert sich der Wert eines Signals, aktualisiert Angular automatisch nur die betroffenen Bereiche der Benutzeroberfläche. Das führt zu einer fein abgestimmten Reaktivität und einer deutlich besseren Skalierbarkeit. Allerdings ist der Syntax dann ein wenig anders wie das nachfolgende geänderte Listing zeigt. Wichtig ist hier besonders die Angabe von changeDetection im @Component-Block in Zeile 9.
import { Component, ChangeDetectionStrategy, signal } from '@angular/core'; @Component({ selector: 'app-simple-signal', standalone: true, imports: [], templateUrl: './simple-signal.component.html', styleUrl: './simple-signal.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) export class SimpleSignalComponent { id = signal(generateGuid()); count = signal(0); increment() { this.count.update(c => c + 1); } decrement() { this.count.update(c => c - 1); } setNewId() { this.id.set(generateGuid()); } } function generateGuid(): string { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { const r = Math.random() * 16 | 0; const v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }
Im HTML-Template werden Klammern verwendet um auf ein Signal zuzugreifen (z. B. {{ count() }}). Ein Signal ist technisch gesehen eine Funktion und keine gewöhnliche Variable. Beim Aufruf des Signals wird sein aktueller Wert zurückgegeben, und Angular registriert gleichzeitig, dass die Vorlage (HTML) von diesem Signal abhängt. Durch dieses Design sind Signale sowohl leicht verständlich als auch äußerst effizient: Jedes Mal, wenn ein Signal aufgerufen wird, verfolgt Angular automatisch seine Verwendung und sorgt dafür, dass nur die Teile der Vorlage aktualisiert werden, die tatsächlich von diesem Signal abhängen, sobald sich dessen Wert ändert.
Simple Signal Demo
Id: {{ id() }}Count: {{ count() }}