DEMO: https://yiqu.github.io/ng-busy-watch/
- Works for long-lived Observables. Loading indicator will be shown when value is evaluated to
true, hide iffalse. - Will also take in a simple boolean value.
- Customizable loading message.
- Add your own CSS class to customize colors and background of loading indicator.
Latest version available for each version of Angular
| ngx-busy-watch | Angular |
|---|---|
| 13.x.x | 13.x.x |
| 10.x.x | < 13.x.x |
npm install ng-busy-watch --saveUsing 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>| 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 |
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
],