1.1.0 • Published 7 months ago
ngx-inner-loading v1.1.0
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 (recommended).
- Manually by adding this line to your
index.html
file
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
- Import Bootstrap Icons CSS in your Angular project:
- Using bootstrap-icons (recommended).
- Manually by adding this line to your
index.html
file (below bootstrap CSS import if manually imported too).
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
- Install the package
npm i ngx-inner-loading --save
🎯 How it works ?
- Import the NgxInnerLoading module
@NgModule({
imports: [
NgxInnerLoadingModule
]
})
- Create in your
component.ts
state variables:
public loading = false;
public error = false;
public data?: string[];
- In your
component.html
use NgxInnerLoading like this:
<div *ngIf="!error && !loading && data && data.length > 0; else innerLoading">
<h2>Data loaded !</h2>
</div>
<ng-template #innerLoading>
<msd-inner-loading [empty]="data?.length == 0" [error]="error"
[loading]="loading" (retry)="retry()">
</msd-inner-loading>
</ng-template>