ngx-perfect-loading

The loading system for Angular 13+ projects.

Referances

1. Installation
2. Getting started
3. Library API
4. Demo

Installation

You can Install ngx-perfect-loading via NPM, using the command below.

PLEASE NOTE: the Library was created for Angular 13 and high versions

NPM

npm install --save ngx-perfect-loading

Getting started

Import the NgxPLoadingModule in your root application module by .forRoot() static method:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxPLoadingModule } from "ngx-perfect-loading";

@NgModule({
  //...
  imports: [
    //...
    NgxPLoadingModule.forRoot(),
  ],
  //...
})
export class AppModule {}

After importing the NgxPLoadingModule in your root module, you can use the loading logic in the whole application:

After importing the module, you need to register listener for the GLOBAL Loading, by this code in your AppComponent:

import { Component, OnInit } from '@angular/core';
import { NgxPLoadingService } from 'ngx-perfect-loading';
// .................
@Component({
    //......
})
export class AppComponent {
    loading$!: Observable<boolean>;

    constructor(private _ngxPLoadingService: NgxPLoadingService) {
        this.loading$ = this._ngxPLoadingService.listen();
    }

  
    onClick() {
        // the function to turn on the loading
        this._ngxPLoadingService.on(); 
        setTimeout(() => {
            // the fucntion to turn off the loading
            this._ngxPLoadingService.off(); 
        }, 500);
    }
}

In AppComponent Template

<button (click)="onClick()">Click</button>
<div *ngIf="loading$ | async">
   you can have anything you need, gif, spinner, other loading indicator
</div>

Ok, So now we have a loading indicator that can be configured by HTML/CSS to show as you want.

Library API

Enums

NgxPLoadingType: The type of Loading Items(LOCAL or GLOBAL)

export enum NgxPLoadingType {
  GLOBAL = 'global',
  LOCAL = 'local'
}

Decorators

| @NgxPListener() | The Property decorator for loading listener by option | | | |-------------------|------------------------------|------------------------------|-------------| | Parameters | Type | Default | | | option | NgxPLoadingType \| string| NgxPLoadingType.GLOBAL| Optional| Usage Example

import { Component, OnInit } from '@angular/core';
import { NgxPLoadingService, NgxPListener } from 'ngx-perfect-loading';
// .................
@Component({
    //......
})
export class AppComponent {
    // loading$!: Observable<boolean>;
    
    // listen by decorator 
    @NgxPListener() loading$!: Observable<boolean>;
    

    constructor(private _ngxPLoadingService: NgxPLoadingService) {
        // now this line is not needed as we are doing the same by NgxPListener decorator
        // this.loading$ = this._ngxPLoadingService.listen();
    }

  
    onClick() {
        // the function to turn on the loading
        this._ngxPLoadingService.on(); 
        setTimeout(() => {
            // the fucntion to turn off the loading
            this._ngxPLoadingService.off(); 
        }, 500);
    }
}

In AppComponent Template

<button (click)="onClick()">Click</button>
<div *ngIf="loading$ | async">
   you can have anything you need, gif, spinner, other loading indicator
</div>

| @NgxPLoading() | The Method Decorator allows to add loading to the methods. The function is turning on the loading by type loading and turning it off when function execution ends. Also can work with Promises and Observables | | | |-------------------|-------------------------------------------|-------------|-----------------| | Parameters | Type | Default | | | loading | NgxPLoadingType \| string | NgxPLoadingType.GLOBAL | Optional |

Usage Example

import { Component, OnInit } from '@angular/core';
import { NgxPListener, NgxPLoading } from 'ngx-perfect-loading';
// .................
@Component({
    //......
})
export class AppComponent {
    // listen by decorator 
    @NgxPListener() loading$!: Observable<boolean>;

    constructor() { }
    
    // NgxPLoading Decorator is working with Promises and Observables
    // NOTE: For Observables NgxPLoading Decorator is turning off the loading when the Observable closes 
    @NgxPLoading()
    onClick() {
        return new Promise( (resolve, reject) => {
            setTimeout( () => {
                
                resolve();
            }, 1000)
        });
    }
}

In AppComponent Template

<button (click)="onClick()">Click</button>
<div *ngIf="loading$ | async">
   you can have anything you need, gif, spinner, other loading indicator
</div>

NgxPLoadingService Methods

|on() | turn on the loading by loading where loading can be the name or the type(GLOBAL or LOCAL ) of loading | | | |-----------|------------------------------------------------------------|---------|------------| | Parameters | Type | Default | | | loading | NgxPLoadingType \| string | NgxPLoadingType.GLOBAL |Optional | | Returns | Type | | | | Returns the unique name of the loading item, where the loading name can be provided by user by loading paramenter | string | | |

|off() | turn off the loading by loading where loading can be the name or the type(GLOBAL or LOCAL ) of loading | | | |-----------|--------------------------|------------------------------------------|-------------| | Parameters | Type | Default | | | loading | NgxPLoadingType \| string | NgxPLoadingType.GLOBAL |Optional| | Returns | Type | | | | Returns true when it found the item by loading name or type | boolean | | |

|listen() | listen the loading changes by loading where loading can be the name or the type(GLOBAL or LOCAL ) of loading | | | |-----------|--------------------------|------------------------------------------|-------------| | Parameters | Type | Default | | | loading | NgxPLoadingType \| string | NgxPLoadingType.GLOBAL | Optional| | Returns | Type | | | | Returns listener for loading, where loading can be the name or the type(GLOBAL or LOCAL ) of loading | Observable<boolean> | | |

Demo

Check out the interactive demo on StackBlitz.