NgxMatLoading

Customizable Loading overlay service and directive for Angular Material.

StackBlitz Demo

Features

• Global or Element/Component overlay
• Custom inner component

TODO

• Tests
• Documentation

Installation

npm -i ngx-mat-loading

Update angular.json

  "styles": [
    "node_modules/ngx-mat-loading/ngx-mat-loading.css",
    "src/styles.scss"
  ]

Import and configure

import { NgxMatLoadingModule, NGX_MAT_LOADING_DEFAULT_OPTIONS } from "ngx-mat-loading";

@NgModule({
  ...,
  imports: [
    NgxMatLoadingModule
  ],
  providers: [
    {
      provide: NGX_MAT_LOADING_DEFAULT_OPTIONS, 
      useValue: {
        backdropClass: 'ngx-mat-loading-dark-backdrop',
        innerOverlay: true,
        componentClass: 'my-loading-component', 
        componentProps: { indicator: 'bar', text: 'LOADING...' }
      }
    }
  ],
  ...
})

Example

Global loading

import { Component } from "@angular/core";
import { concatMap, delay, finalize, tap } from "rxjs/operators";
import { NgxMatLoadingService } from "ngx-mat-loading";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor(
      private _loading: NgxMatLoadingService
  ) {}
  
  showLoading() {
    this._loading.show({
      mode: "determinate",
      text: 'Starting...'
    }, {
      componentStyle: {
        'width': '150px'
      }
    });
    of(0, 3, 15, 34, 62, 63, 64, 65, 99, 100).pipe(
      concatMap(x => of(x).pipe(delay(500))),
      tap(v => this._loading.update({ value: v, text: `Processing ${v}%...` })),
      finalize(() => this._loading.hide())
    ).subscribe();
  }
}

Element/Component loading

export class MyComponent {
  loading: boolean = false;
}

<div
  class="my-div"
  [ngxMatLoading]="loading"
  ngxMatLoadingBackdropClass="ngx-mat-loading-light-backdrop"
  ngxMatLoadingInnerOverlay>
  
  content
  
</div>

<button (click)="loading = !loading">Toggle loading</button>

Services

NgxMatLoadingService

Properties

| Property | Description | | :------- | :---------- | | visible: boolean | | | componentRef?: ComponentRef<any> | Reference to inner loading component. |

Methods

| Method | Description | | :----- | :---------- | | show(props?: NgxMatLoadingComponentProps | any, options?: NgxMatLoadingOptions): void | Show overlay. | | update(props?: NgxMatLoadingComponentProps | any): void | Update overlay's component content. | | hide(): void | Hide overlay.|

Directives

NgxMatLoadingDirective

Selector: ngxMatLoading Exported as: ngxMatLoading

Properties

| Property | Description | | :------- | :---------- | | @Input('ngxMatLoading')show: boolean | | | @Input('ngxMatLoadingBackdropClass')backdropClass?: string | | | @Input('ngxMatLoadingPanelClass')panelClass?: string | | | @Input('ngxMatLoadingInnerOverlay')innerOverlay: boolean | Default false.| | @Input('ngxMatLoadingComponentType')componentType?: ComponentType<any> | | | @Input('ngxMatLoadingComponentProps')componentProps?: NgxMatLoadingComponentProps | any | | | @Input('ngxMatLoadingComponentClass')componentClass?: string | | | @Input('ngxMatLoadingComponentStyle')componentStyle?: {[key:string]: string} | | | visible: boolean | | | componentRef?: ComponentRef<any> | Reference to inner loading component. |

Methods

| Method | Description | | :----- | :---------- | | show(props?: NgxMatLoadingComponentProps | any): void | Show overlay. | | update(props?: NgxMatLoadingComponentProps | any): void | Update overlay's component content. | | hide(): void | Hide overlay.|

Interfaces

NgxMatLoadingComponentProps

export interface NgxMatLoadingComponentProps {
  /**
   * Loading message
   */
  text?: string;

  /**
   * Spinner's or Bar's value. Works only with 'spinner' or 'bar' indicator with 'determinate' mode.
   */
  value?: number;

  /**
   * Spinner's or Bar's mode
   */
  mode?: 'indeterminate' | 'determinate';

  /**
   * Show progress with MatSpinner or MatProgressBar.
   */
  indicator?: 'none' | 'spinner' | 'bar';

  /**
   * Spinner's diameter
   */
  indicatorDiameter?: number;

  /**
   * Spinner's stroke width or Bar width
   */
  indicatorWidth?: number;

  /**
   * Spinner or Bar color
   */
  indicatorColor?: string;
}

NgxMatLoadingOptions

export interface NgxMatLoadingOptions {
  /**
   * Loading's overlay backdrop class
   */
  backdropClass?: string;

  /**
   * Loading's overlay content panel class
   */
  panelClass?: string;

  /**
   * Whether overlay is inside covered element or in global overlay container. Works only with NgxMatLoading directive.
   * Default false.
   */
  innerOverlay?: boolean;

  /**
   * Whether loading overlay will block global scroll. Works only with NgxMatLoading service. Default is false.
   */
  blockScroll?: boolean,

  /**
   * Loading's overlay content component. Default NgxMatLoadingComponent.
   */
  componentType?: ComponentType<any>;

  /**
   * Loading's overlay content component's CSS class.
   */
  componentClass?: string;

  /**
   * Loading's overlay content component's CSS style.
   */
  componentStyle?: {[key: string]: string};

  /**
   * Loading's overlay content component properties (inputs).
   */
  componentProps?: NgxMatLoadingComponentProps | any;
}