https://github.com/istornz/ngx-inner-loading
A simple Angular wrapper working with Bootstrap to show dynamically empty, error or loading screens.
https://github.com/istornz/ngx-inner-loading
angular bootstrap loading-indicator npm-package
Last synced: about 1 year ago
JSON representation
A simple Angular wrapper working with Bootstrap to show dynamically empty, error or loading screens.
- Host: GitHub
- URL: https://github.com/istornz/ngx-inner-loading
- Owner: istornz
- Created: 2022-02-22T10:28:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-10T14:03:50.000Z (about 2 years ago)
- Last Synced: 2025-01-29T23:17:59.726Z (about 1 year ago)
- Topics: angular, bootstrap, loading-indicator, npm-package
- Language: TypeScript
- Homepage:
- Size: 523 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgxInnerLoading
A simple Angular wrapper working with **Bootstrap** to show dynamically **empty** 🙈, **error** ⛔️ or **loading** 🦥 screen.
## 🧐 What is it ?
This library help you displaying **multiple** screens when you are trying to load data:
- **Loading** screen ➡️ when loading data.
- **Empty** screen ➡️ when no data was returned.
- **Error** screen ➡️ when the loading process fail.
All components are fully **customizables**, you can **easily change** description, display retry button...
## 🗃 How to install ?
- Import **Bootstrap CSS** in your Angular project:
- Using [**ngx-bootstrap**](https://valor-software.com/ngx-bootstrap/#/) (**recommended**).
- Manually by adding this line to your ```index.html``` file
```html
```
- Import **Bootstrap Icons CSS** in your Angular project:
- Using [**bootstrap-icons**](https://stackoverflow.com/a/65440311/5078902) (**recommended**).
- Manually by adding this line to your ```index.html``` file (below bootstrap CSS import if manually imported too).
```html
```
- Install the package
```shell
npm i ngx-inner-loading --save
```
## 🎯 How it works ?
- Import the **NgxInnerLoading** module
```typescript
@NgModule({
imports: [
NgxInnerLoadingModule
]
})
```
- Create in your ```component.ts``` state variables:
```typescript
protected loading = false;
protected error = false;
protected data?: string[];
```
- In your ```component.html``` use NgxInnerLoading like this:
```html
@if(!error && !loading && data && data.length > 0) {
Data loaded !
} @else {
}
```
## 📸 How it looks ?
### Error screen
### Loading screen
### Empty screen
