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/[email protected]/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/[email protected]/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>

📸 How it looks ?

Error screen

Loading screen

Empty screen