NgxSuspenseOf

Angular directive for repeating HTML element by count

✓ Angular 22 compatible

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

• Lightweight
• No dependencies!
• Directive way

🛠️ Install

1. Use Bun to install the package

bun add ngx-suspense-of

2. Add NgxSuspenseOfDirective into your imports

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

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

or

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

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

🚀 Quick start

Example code

<ng-container
  *ngxSuspense="
    let data of observable;
    loading: loading;
    empty: empty;
    error: error
    stateChangeFn: onStateChange"
>
  <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>

  public onStateChange = <T>(state: NgxSuspenseState<T>): void => {
    console.log(state);
  };

🔧 Compatibility

Angular	ngx-suspense-of	Install
>= 22	4.x	bun add ngx-suspense-of
>= 20	3.x	bun add ngx-suspense-of@3
>= 14	2.x	bun add ngx-suspense-of@2
>= 12	1.x	bun add ngx-suspense-of@1
>= 5 < 13	0.x	bun add ngx-suspense-of@0

📦 Dependencies

None

🪪 License

Copyright © 2021 - 2026 Dominik Hladik

All contents are licensed under the MIT license.