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
],