Loading directive

Loading directive provide a simple approach to switch templates when the loading state change. To work correctly the loading service must be provided by a component or module.

API

Inputs

Input	Type	Default	Required	Description
[ngxLoading]	PropertyKey | PropertyKey[]	[]	false	Set the loading state properties that will be observed
[ngxLoadingElse]	TemplateRef | null	false	false	Render the custom loading template when loading is true

Example

src/app/app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LoadingService } from 'ngx-reactive-loading';

@Component({
  selector: 'app-root',
  templateUrl: `./app.component.html`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [LoadingService.componentProvider(['add'])],
})
class AppComponent {
  constructor(private readonly loadingService: LoadingService) {}
}

src/app/app.component.html

<button *ngxLoading="'add'; else loadingTpl">Add</button>
<ng-template #loadingTpl> Loading... </ng-template>