{"id":17168347,"url":"https://github.com/istornz/ngx-inner-loading","last_synced_at":"2025-03-24T18:40:37.001Z","repository":{"id":136917002,"uuid":"462246222","full_name":"istornz/ngx-inner-loading","owner":"istornz","description":"A simple Angular wrapper working with Bootstrap to show dynamically empty, error or loading screens.","archived":false,"fork":false,"pushed_at":"2024-01-10T14:03:50.000Z","size":536,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T23:17:59.726Z","etag":null,"topics":["angular","bootstrap","loading-indicator","npm-package"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/istornz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-22T10:28:01.000Z","updated_at":"2022-07-13T06:57:04.000Z","dependencies_parsed_at":"2024-12-02T08:56:09.146Z","dependency_job_id":null,"html_url":"https://github.com/istornz/ngx-inner-loading","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/istornz%2Fngx-inner-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/istornz%2Fngx-inner-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/istornz%2Fngx-inner-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/istornz%2Fngx-inner-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/istornz","download_url":"https://codeload.github.com/istornz/ngx-inner-loading/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245330065,"owners_count":20597712,"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","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","bootstrap","loading-indicator","npm-package"],"created_at":"2024-10-14T23:11:45.293Z","updated_at":"2025-03-24T18:40:36.981Z","avatar_url":"https://github.com/istornz.png","language":"TypeScript","readme":"# NgxInnerLoading\n\nA simple Angular wrapper working with **Bootstrap** to show dynamically **empty** 🙈, **error** ⛔️ or **loading** 🦥 screen.\n\n## 🧐 What is it ?\n\nThis library help you displaying **multiple** screens when you are trying to load data:\n- **Loading** screen ➡️ when loading data.\n- **Empty** screen ➡️ when no data was returned.\n- **Error** screen ➡️ when the loading process fail.\n\nAll components are fully **customizables**, you can **easily change** description, display retry button...\n\n## 🗃 How to install ?\n\n- Import **Bootstrap CSS** in your Angular project:\n  - Using [**ngx-bootstrap**](https://valor-software.com/ngx-bootstrap/#/) (**recommended**).\n  - Manually by adding this line to your ```index.html``` file\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\"\u003e\n```\n\n- Import **Bootstrap Icons CSS** in your Angular project:\n  - Using [**bootstrap-icons**](https://stackoverflow.com/a/65440311/5078902) (**recommended**).\n  - Manually by adding this line to your ```index.html``` file (below bootstrap CSS import if manually imported too).\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css\"\u003e\n```\n\n- Install the package\n\n```shell\nnpm i ngx-inner-loading --save\n```\n\n## 🎯 How it works ?\n\n- Import the **NgxInnerLoading** module\n\n```typescript\n@NgModule({\n  imports: [\n    NgxInnerLoadingModule\n  ]\n})\n```\n\n- Create in your ```component.ts``` state variables:\n```typescript\nprotected loading = false;\nprotected error = false;\nprotected data?: string[];\n```\n\n- In your ```component.html``` use NgxInnerLoading like this:\n\n```html\n@if(!error \u0026\u0026 !loading \u0026\u0026 data \u0026\u0026 data.length \u003e 0) {\n  \u003ch2\u003eData loaded !\u003c/h2\u003e\n} @else {\n  \u003cngx-inner-loading [empty]=\"data?.length == 0\" [error]=\"error\"\n    [loading]=\"loading\" (retry)=\"retry()\"\u003e\n  \u003c/ngx-inner-loading\u003e\n}\n```\n\n## 📸 How it looks ?\n\n### Error screen\n\n![error](https://s10.gifyu.com/images/Capture-decran-2022-02-22-a-11.17.36.png)\n\n### Loading screen\n\n![loading](https://s10.gifyu.com/images/Capture-decran-2022-02-22-a-11.20.18.png)\n\n### Empty screen\n\n![empty](https://s10.gifyu.com/images/Capture-decran-2022-02-22-a-11.17.59.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fistornz%2Fngx-inner-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fistornz%2Fngx-inner-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fistornz%2Fngx-inner-loading/lists"}