ng-busy-watch

DEMO: https://yiqu.github.io/ng-busy-watch/

Features

• Works for long-lived Observables. Loading indicator will be shown when value is evaluated to true, hide if false.
• Will also take in a simple boolean value.
• Customizable loading message.
• Add your own CSS class to customize colors and background of loading indicator.

Dependencies

Latest version available for each version of Angular

ngx-busy-watch	Angular
13.x.x	>= 13.x.x
10.x.x	< 13.x.x

Install

npm install ng-busy-watch --save

Usage

Using ng-busy-watch with Subjects:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private busySubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public busy$ = this.overAllBusyIndicator.asObservable();
}

<div>
  <div *ngBusyWatch="busy$" class="ex">
    ...
  </div>
</div>

Using ng-busy-watch with NgRx selectors:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public loading$ = this.store.select(fromSelectors.isLoading);
  constructor(private store: Store<AppState>) {
  }
}

<div>
  <div *ngBusyWatch="loading$" class="ex">
    ... 
  </div>
</div>

Using ng-busy-watch with Boolean:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public loading: boolean = true;
}

<div>
  <div *ngBusyWatch="loading" class="ex">
    ... 
  </div>
</div>

Customizable Global Options

Option	Type	Default	Description
extraCssClass	string	empty	Extra CSS class for loading indicator
message	string	Please wait...	Loading indicator text
showSpinner	boolean	true	Whether to show loading animation SVG

Setting Global Options

Pass values to NgBusyWatchModule.forRoot()

// root app NgModule
imports: [
  NgBusyWatchModule.forRoot({
    extraCssClass: 'cool-css-class',
    message: 'Loading..',
    showSpinner: true
  }),
],

Or just leave it as NgBusyWatchModule to use its default values.

// root app NgModule
imports: [
  NgBusyWatchModule
],