https://github.com/Celtian/ngx-suspense-of

Angular directive that adds suspense to your app
https://github.com/Celtian/ngx-suspense-of

angular library

Last synced: 1 day ago
JSON representation

Angular directive that adds suspense to your app

• Host: GitHub
• URL: https://github.com/Celtian/ngx-suspense-of
• Owner: Celtian
• License: mit
• Created: 2021-02-20T13:36:03.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-10-17T18:37:59.000Z (30 days ago)
• Last Synced: 2024-10-20T04:01:00.736Z (27 days ago)
• Topics: angular, library
• Language: TypeScript
• Homepage: https://celtian.github.io/ngx-suspense-of
• Size: 2.37 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• fucking-awesome-angular - ngx-suspense-of - Angular directive that adds suspense to your app. (Table of contents / Angular)
• awesome-angular - ngx-suspense-of - Angular directive that adds suspense to your app. (Table of contents / Angular)

README

        


  

  
NgxSuspenseOf


[![npm version](https://badge.fury.io/js/ngx-suspense-of.svg)](https://badge.fury.io/js/ngx-suspense-of)

[![Package License](https://img.shields.io/npm/l/ngx-suspense-of.svg)](https://www.npmjs.com/ngx-suspense-of)

[![NPM Downloads](https://img.shields.io/npm/dm/ngx-suspense-of.svg)](https://www.npmjs.com/ngx-suspense-of)

[![Snyk](https://snyk.io/advisor/npm-package/ngx-suspense-of/badge.svg)](https://snyk.io/advisor/npm-package/ngx-suspense-of)

[![codecov](https://codecov.io/gh/Celtian/ngx-suspense-of/branch/master/graph/badge.svg?token=1IRUKIKM0D)](https://codecov.io/gh/celtian/ngx-suspense-of/)

[![stars](https://badgen.net/github/stars/celtian/ngx-suspense-of)](https://github.com/celtian/ngx-suspense-of/)

[![forks](https://badgen.net/github/forks/celtian/ngx-suspense-of)](https://github.com/celtian/ngx-suspense-of/)

[![HitCount](http://hits.dwyl.com/celtian/ngx-suspense-of.svg)](http://hits.dwyl.com/celtian/ngx-suspense-of)

> Angular directive for repeating HTML element by count

> ✓ _Angular 18 compatible_

Here's the [demo](http://celtian.github.io/ngx-suspense-of/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-suspense-of) or [codesandbox live preview](https://codesandbox.io/s/ngx-suspense-of-60z62)

- Lightweight

- No dependencies!

- Directive way

## 🛠️ Install

1. Use yarn (or npm) to install the package

```terminal

yarn add ngx-suspense-of

```

2. Add `NgxSuspenseOfDirective` into your `imports`

```typescript

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

@Component({

  standalone: true,

  imports: [

    // ...

    NgxSuspenseOfDirective

  ],

})

```

or

```typescript

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

@NgModule({

 // ...

 imports: [

   // ...

   NgxSuspenseOfDirective

 ]

})

```

## 🚀 Quick start

### Example code

```html

  
{{ data | json }}


Loading ...

Incoming data are empty

  
{{ error }}

  Try again


```

```typescript

  public onStateChange = (state: NgxSuspenseState): 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](https://github.com/Celtian)

All contents are licensed under the [MIT license].

[mit license]: LICENSE