ngx-suspense-of

Angular directive that adds suspense to your app

Usage no npm install needed!

<script type="module">
  import ngxSuspenseOf from 'https://cdn.skypack.dev/ngx-suspense-of';
</script>

README

NgxSuspenseOf

npm version Package License NPM Downloads Build & Publish codecov stars forks HitCount

Angular directive for repeating HTML element by count

✓ Angular 13, Ivy and SSR compatible

Here's the demo or stackblitz live preview or codesandbox live preview

  • Lightweight
  • No dependencies!
  • Directive way

Install

  1. Use yarn (or npm) to install the package
yarn add ngx-suspense-of
  1. Add NgxSuspenseOfModule into your module imports
  import { NgxSuspenseOfModule } from 'ngx-suspense-of';

  @NgModule({
   // ...
   imports: [
     // ...
     NgxSuspenseOfModule
   ]
  })

Compatibility

Angular ngx-suspense-of Install
>= 12 1.x yarn add ngx-suspense-of
>= 5 < 13 0.x yarn add ngx-suspense-of@0

Quick start

Example code

<ng-container
  *ngxSuspense="
    let data of observable;
    loading: loading;
    empty: empty;
    error: error"
>
  <pre>{{ data | json }}</pre>
</ng-container>
<ng-template #loading>Loading ...</ng-template>
<ng-template #empty>Incoming data are empty</ng-template>
<ng-template #error let-tryAgain let-error="error">
  <pre>{{ error }}</pre>
  <button (click)="tryAgain()">Try again</button>
</ng-template>

Dependencies

None

License

Copyright © 2021 - 2022 Dominik Hladik

All contents are licensed under the MIT license.