{"id":20538265,"url":"https://github.com/celtian/ngx-suspense-of","last_synced_at":"2025-07-23T00:07:25.163Z","repository":{"id":40310293,"uuid":"340662694","full_name":"Celtian/ngx-suspense-of","owner":"Celtian","description":"Angular directive that adds suspense to your app","archived":false,"fork":false,"pushed_at":"2025-05-31T17:28:01.000Z","size":2591,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T10:18:39.647Z","etag":null,"topics":["angular","library"],"latest_commit_sha":null,"homepage":"https://celtian.github.io/ngx-suspense-of","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Celtian.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-02-20T13:36:03.000Z","updated_at":"2025-05-31T17:26:39.000Z","dependencies_parsed_at":"2025-04-14T07:43:14.159Z","dependency_job_id":"836f7848-de31-4479-837d-45de939f8ff8","html_url":"https://github.com/Celtian/ngx-suspense-of","commit_stats":{"total_commits":62,"total_committers":1,"mean_commits":62.0,"dds":0.0,"last_synced_commit":"3a4702c55f7ad62ce91441506b9f09c0c15cf573"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/Celtian/ngx-suspense-of","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-suspense-of","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-suspense-of/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-suspense-of/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-suspense-of/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Celtian","download_url":"https://codeload.github.com/Celtian/ngx-suspense-of/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-suspense-of/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266592267,"owners_count":23953109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","library"],"created_at":"2024-11-16T00:46:07.895Z","updated_at":"2025-07-23T00:07:25.153Z","avatar_url":"https://github.com/Celtian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Celtian/ngx-suspense-of\" target=\"blank\"\u003e\u003cimg src=\"assets/logo.svg?sanitize=true\" alt=\"\" width=\"120\"\u003e\u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eNgxSuspenseOf\u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-suspense-of.svg)](https://badge.fury.io/js/ngx-suspense-of)\n[![Package License](https://img.shields.io/npm/l/ngx-suspense-of.svg)](https://www.npmjs.com/ngx-suspense-of)\n[![NPM Downloads](https://img.shields.io/npm/dm/ngx-suspense-of.svg)](https://www.npmjs.com/ngx-suspense-of)\n[![Snyk](https://snyk.io/advisor/npm-package/ngx-suspense-of/badge.svg)](https://snyk.io/advisor/npm-package/ngx-suspense-of)\n[![codecov](https://codecov.io/gh/Celtian/ngx-suspense-of/branch/master/graph/badge.svg?token=1IRUKIKM0D)](https://codecov.io/gh/celtian/ngx-suspense-of/)\n[![stars](https://badgen.net/github/stars/celtian/ngx-suspense-of)](https://github.com/celtian/ngx-suspense-of/)\n[![forks](https://badgen.net/github/forks/celtian/ngx-suspense-of)](https://github.com/celtian/ngx-suspense-of/)\n[![HitCount](http://hits.dwyl.com/celtian/ngx-suspense-of.svg)](http://hits.dwyl.com/celtian/ngx-suspense-of)\n\n\u003e Angular directive for repeating HTML element by count\n\n\u003e ✓ _Angular 20 compatible_\n\nHere'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)\n\n- Lightweight\n- No dependencies!\n- Directive way\n\n## 🛠️ Install\n\n1. Use yarn (or npm) to install the package\n\n```terminal\nyarn add ngx-suspense-of\n```\n\n2. Add `NgxSuspenseOfDirective` into your `imports`\n\n```typescript\nimport { NgxSuspenseOfDirective } from 'ngx-suspense-of';\n\n@Component({\n  standalone: true,\n  imports: [\n    // ...\n    NgxSuspenseOfDirective\n  ],\n})\n```\n\nor\n\n```typescript\nimport { NgxSuspenseOfDirective } from 'ngx-suspense-of';\n\n@NgModule({\n // ...\n imports: [\n   // ...\n   NgxSuspenseOfDirective\n ]\n})\n```\n\n## 🚀 Quick start\n\n### Example code\n\n```html\n\u003cng-container\n  *ngxSuspense=\"\n    let data of observable;\n    loading: loading;\n    empty: empty;\n    error: error\n    stateChangeFn: onStateChange\"\n\u003e\n  \u003cpre\u003e{{ data | json }}\u003c/pre\u003e\n\u003c/ng-container\u003e\n\u003cng-template #loading\u003eLoading ...\u003c/ng-template\u003e\n\u003cng-template #empty\u003eIncoming data are empty\u003c/ng-template\u003e\n\u003cng-template #error let-tryAgain let-error=\"error\"\u003e\n  \u003cpre\u003e{{ error }}\u003c/pre\u003e\n  \u003cbutton (click)=\"tryAgain()\"\u003eTry again\u003c/button\u003e\n\u003c/ng-template\u003e\n```\n\n```typescript\n  public onStateChange = \u003cT\u003e(state: NgxSuspenseState\u003cT\u003e): void =\u003e {\n    console.log(state);\n  };\n```\n\n## 🔧 Compatibility\n\n| Angular   | ngx-suspense-of | Install                      |\n| --------- | --------------- | ---------------------------- |\n| \u003e= 20     | 3.x             | `yarn add ngx-suspense-of`   |\n| \u003e= 14     | 2.x             | `yarn add ngx-suspense-of@2` |\n| \u003e= 12     | 1.x             | `yarn add ngx-suspense-of@1` |\n| \u003e= 5 \u003c 13 | 0.x             | `yarn add ngx-suspense-of@0` |\n\n## 📦 Dependencies\n\n_None_\n\n## 🪪 License\n\nCopyright \u0026copy; 2021 - 2025 [Dominik Hladik](https://github.com/Celtian)\n\nAll contents are licensed under the [MIT license].\n\n[mit license]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceltian%2Fngx-suspense-of","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceltian%2Fngx-suspense-of","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceltian%2Fngx-suspense-of/lists"}