GEDOPLAN
Webprogrammierung

Angular Change Detection Strategy

Webprogrammierung
puzzle 1261138 640

Angular nimmt uns viele Dinge ab, z.B. uns um die Aktualisierung der Oberfläche zu kümmern. Dabei verrichtet die Bibliothek Höchstleistungen. Und wir können ihr den Job leichter machen.

Die Grundidee ist einfach. Bei einer ganzen Reihe von Ereignissen prüft Angular in allen aktiven Komponenten, von oben nach unten, ob sich eine Expression geändert hat, indem er sie einfach noch einmal auswertet und den alten mit dem neuen Wert vergleicht. Sollte dies der Fall sein, führt er eine Aktualisierung der Oberfläche durch. Das kann bei großen Anwendungen zu spürbaren Performanceeinbußen führen. Diese sogenannte Change Detection Strategy lässt sich auf Komponenten-Ebene ändern.

@Component({
...
  changeDetection: ChangeDetectionStrategy.OnPush,
...
})

Diese Komponente und alle ihre Kind-Elemente werden nun nur noch eingeschränkt automatisch durch ihren Parent aktualisiert. Das schafft Performance, benötigt aber einen genaueren Blick wann / wie sich Daten ändern und ob eine manuelle Aktualisierung nötig ist. Im Folgenden die Ereignisse, die zu einer Aktualisierung der Oberfläche führen und was dabei zu beachten ist:

  • @Input
    • OnPush: nur bei Änderung der Referenz
    • Default: ja
  • @Output
    • OnPush: ja
    • Default: ja
  • async pipe
    • OnPush: ja
    • Default: ja
  • setTimeout
    • OnPush: nein
    • Default: ja
  • Promise.then / Obersvable.subscribe
    • OnPush: nein
    • Default: ja
  • signals
    • OnPush: nur bei Änderung der Referenz oder angepasster “equal” Option im Signal
    • Default: ja

Bei der Verwendung der OnPush Strategie sollten wir also:

  • async pipe präferieren (gegenüber manueller Subscription)
  • immutable Input Objekte verwenden oder auf die neuen signals inputs (immutable) / signal models setzen

…dann klappt’s auf mit dem OnPush

Live. Farbe. Gihub

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

flasks 606612 640
Web Security, Webprogrammierung

Keycloak + Protractor E2E Test

Keycloak ist eine charmante Authentifizierungs-Lösung die sich dank keycloak-angular relativ Problemlos in der eigenen Anwendung verankern lässt. Im Arbeitsalltag stolpert…
geometry 1044090 640 jpg
Webprogrammierung

Angular 18.1 @let Variablen

“Template Locale Variables” ist eines der am meisten gewünschten Features in der Angular Community. Ist? War. Mit Angular 18.1 werden…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!