@aviellv/angular-async-directive

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

Usage no npm install needed!

<script type="module">
  import aviellvAngularAsyncDirective from 'https://cdn.skypack.dev/@aviellv/angular-async-directive';
</script>

README

angular-async-directive

npm version Build Status

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]="httpQueryquot;>
      <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>