Ngx-suspense-of NPM

Angular directive for repeating HTML element by count
✓ Angular 17 compatible

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

Lightweight
No dependencies!
Directive way

Install

Use yarn (or npm) to install the package

yarn add ngx-suspense-of

Add NgxSuspenseOfDirective into your imports

import { NgxSuspenseOfDirective } from 'ngx-suspense-of';

@Component({
  standalone: true,
  imports: [
    // ...
    NgxSuspenseOfDirective
  ],
})

import { NgxSuspenseOfDirective } from 'ngx-suspense-of';

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

Compatibility

Angular	ngx-suspense-of	Install
>= 14	2.x	`yarn add ngx-suspense-of`
>= 12	1.x	`yarn add ngx-suspense-of@1`
>= 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>