angular-async-directive

An angular (6+) directive for handling asynchronous requests (observables) in a fluent way

Motivation

A common use case for consuming async streams is displaying a loading animation, the data itself on success or a failure message when it errors. This directive is meant to ease this process and allow a quick way to handle all three states (loading,success,failure).

Example usage

    this.httpQuery$ = this.http.get<string>("./api/text");
    

    <ng-container [ngAwait]="httpQuery$">
      <ng-container *ngAwaitLoading>loading..</ng-container>   
      <ng-container *ngAwaitSuccess="let data"> data result: {{ data }}</ng-container> 
      <ng-container *ngAwaitFailure="let error"> error has occured: {{ error.message }}</ng-container>
    </ng-container>