Angular directive for repeating HTML element by count

✓ Angular 19 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

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 | | --------- | --------------- | ---------------------------- | | >= 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 |

📦 Dependencies

None

🪪 License

Copyright © 2021 - 2024 Dominik Hladik

All contents are licensed under the MIT license.