ZwLoadingScreen

This library was generated with Angular CLI version 18.2.12.

Usage

Just install the package with:

npm install zw-loading-screen

and import the 'ZwLoadingScreenModule' to your own module where you want to use it.

After you are installed and imported it correctly, just add to your 'angular.json' the css file from the 'NgxSpinnerModule' like just you are do with the simple Ngx Spinner.

The api calls will be designed by this loading screen automatically with a loading interceptor.

You can change the size, the color and the key to tha loading text from your localization keys and the 'Loading..' text will be localized. If you are not set anything it will be fall back to default settings. You can do that in the constructor with these functions from the ZwLoadingScreenService:

-setLoadingTextKey(key: string) -setColor(color: string) -setBdColor(bdColor: string) -setSizeOption(size: 'small' | 'medium' | 'large')

Code Example

Firstly you should import the service to tha desired component or service. For that use this in the component's constructor:

private loadingService: ZwLoadingScreenService

You can use it with any observable subscription. After you can use it like this for example with store loading observable:

constructor(private loadingService: ZwLoadingScreenService) {
  this.subscriptions.push(this.store.select(store => store.isLoading).subscribe(loading => {
    this.loadingService.setLoadingObservable(loading)
  }));

  this.loadingService.setLoadingTextKey('LOADING.TITLE');
  this.loadingService.setColor('#fff');
  this.loadingService.setBdColor('rgba(51,51,51,0.8)');
  this.loadingService.setSizeOption('medium');
}

Multiple interceptors

If you are have multiple interceptors, then you need to create a provider array for interceptors. Include the loading interceptor from the 'zw-loading-screen' with the others and provide that in the 'app.module.ts'.

Constants

import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { Provider } from "@angular/core";
import { LoadingInterceptor } from "zw-loading-screen";
import { ErrorInterceptor } from "zw-snackbar-message";

export const interceptorProviders: Provider[] = [
  { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
]

App Module

import { interceptorProviders } from 'path-to-exported-constants';

providers: [
    interceptorProviders
  ],

Further help

If you are not understanding something about the usage, feel free to reach me out.