Skip to content

⏱️ NgBusyWatch is used for displaying a loading indicator for a long-lived Observable or boolean. Unlike other busy libraries, NgBusyWatch will not wait till the Observable to complete, instead NgBusyWatch will watch the long-lived Observable's value and show the loading indicator as long as the value is ever truthy.

Notifications You must be signed in to change notification settings

yiqu/ng-busy-watch

Repository files navigation

NgBusy Watch

ng-busy-watch


npm travisci codecov

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

About

⏱️ NgBusyWatch is used for displaying a loading indicator for a long-lived Observable or boolean. Unlike other busy libraries, NgBusyWatch will not wait till the Observable to complete, instead NgBusyWatch will watch the long-lived Observable's value and show the loading indicator as long as the value is ever truthy.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published