NgxSuspenseOf
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
NgxSuspenseOfDirectiveinto yourimports
import { NgxSuspenseOfDirective } from 'ngx-suspense-of';
@Component({
standalone: true,
imports: [
// ...
NgxSuspenseOfDirective
],
})or
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>Dependencies
None
License
Copyright © 2021 - 2024 Dominik Hladik
All contents are licensed under the MIT license.