Angular - Observables im HTML-Template zusammenfassen

Observables (=Datenströme) sind ein spannendes und zugleich umfangreiches Thema. In Angular-Projekten kommen diese sehr häufig vor. RxJS bietet für das Arbeiten mit Observables nicht nur eine fast unüberschaubare Anzahl an Funktionen und Möglichkeiten. Auch die Dokumentation ist sehr gut und trotzdem übersichtlich. Unter anderem ist das Framework deswegen so mächtig, weil es sehr viele Möglichkeiten gibt, mehrere Observables miteinander in Verbindung zu bringen bzw. zu verketten. Das ist die Paradedisziplin von RxJS. Darum soll es aber in diesen Post nicht gehen. Ich möchte euch einen Weg aufzeigen, wie man mehrere Observables innerhalb eines HTML-Templates mit Hilfe der async-Pipe zusammenfassen kann. Dazu habe ich euch wieder ein lauffähiges Projekt auf GitHub vorbereitet.

Der nachfolgende Code-Ausschnitt zeigt zwei unterschiedliche Observables. Zu finden in der app.component.ts.

public autos$: Observable<Auto[]> = of([
  { id: 1, name: 'Golf' },
  { id: 3, name: 'Adam' },
  { id: 2, name: 'A Klasse' },
  { id: 4, name: 'Polo' },
  { id: 5, name: 'e-Golf' }
]);
public personen$: Observable<Person[]> = of([
  { vorname: 'Maik' },
  { vorname: 'Simone' }
]); 

<ng-container
  *ngIf="{
    autos: autos$ | async,
    personen: personen$ | async
  } as zusammenfassung"
>
  <ul>
    <li *ngFor="let auto of zusammenfassung.autos">
      {{ auto.id }}, {{ auto.name }}
    </li>
  </ul>
  <hr />
  <ul>
    <li *ngFor="let person of zusammenfassung.personen">
      {{ person.vorname }}
    </li>
  </ul>
</ng-container>
 

Berühmte abschließende Worte 

Wie gesagt, das Beispiel ist konstruiert. Hauptsächlich ging es mir darum aufzuzeigen, was überhaupt möglich ist. Auch wenn ich schon über 2 Jahre mit Angular entwickle, habe ich diese Syntax bzw. Möglichkeit lange nicht gekannt. Und so soll es euch auf jeden Fall nicht ergehen.

Habt ihr Fragen? Schreibt mir doch eine E-Mail oder schaut euch das Beispiel auf Github noch einmal an.