GEDOPLAN
Webprogrammierung

Reaktive Templates in Angular

Webprogrammierung
hypnosis 4041584 640

Die Arbeit mit Observables ist sicherlich täglich Brot für die meisten Angular Entwickler. Ein Template-Feature ist dabei allerdings vielen Entwicklern kaum ein Begriff, obwohl es in vielerlei Hinsicht hilfreich ist.

Eine Komponente benötigt zur Initialisierung Daten einer API. Nichts Ungewöhnliches. Ein einfacher Ansatz der gewählt wird, ist häufig eine Subscription im Konstruktor durchzuführen und das Ergebnis in einem Attribut abzulegen um dann im Template “entspannt” die einzelnen Attribute im Zugriff zu haben.

    this.service.loadUser().subscribe(user => {
      this.user = user;
    })
  1. ein zusätzliches Attribut welches initial “undefined” ist, was im Template berücksichtigt werden muss
  2. korrekterweise müssten wir in vielen Fällen ein “unsubscribe” im ngOnDestroy durchführen
  3. Templates von Komponenten, die mit der OnPush-ChangeDetectionStrategy registriert sind, werden nicht korrekt aktualisiert

Angulars async-Pipe löst all diese Probleme. Um diese nicht an x-Stellen im Template einsetzen zu müssen, um auf einzelne Attribute zuzugreifen, bietet Angular die “as”-Deklaration.

@if(service.loadUser() | async; as user){
  <!-- oder *ngIf="loadUser$ | async as user" -->
  Hallo: {{user.username}}
} @else{
  ...wait until data is loaded...
}

Sobald das Observable einen Wert liefert, wird dieser in der Variable “user” zur Verfügung gestellt, ein Unsubscribe erfolgt automatisch und auch in “OnPush”-Komponenten sorgt Angular dank async-Pipe für die korrekte Aktualisierung der UI.

Live. In Farbe. Github

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

pages g14a0ddbef 640
Spring

Spring Boot + Jasper Font Extensions

Jasper Reports bietet in der Java-Welt eine tolle Möglichkeit, um Reports für die unterschiedlichsten Einsatzzwecke zu generieren. Gerade im Zusammenspiel…

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!