ngx-busy

Page loading spinner with backdrop for Angular

Table of contents

1. Installation instructions
2. Usage

Installation instructions

Install ngx-busy from npm

npm install ngx-busy --save

Usage

Import the BusyModule from ngx-busy in your Angular module

import {BusyModule} from 'ngx-busy';

@NgModule({
  imports: [
    ...
    BusyModule
  ],
  ...
})
export class MyModule {
}

In your components add the ngx-busy component:

<ngx-busy [busy]="subscription"></ngx-busy>

where busy takes an ISubscription from rxjs/Subscription

Example

@Component({
  selector: 'my-component',
  template: `    
    <h1>{{things}}</h1>
    <ngx-busy [busy]="thingsSubscription"></ngx-busy>
  `
})
export class MyComponent implements OnInit { 
  thingsSubscription: Subscription;
  things: any;

  constructor(private myService: MyService) {
  }

  ngOnInit() {
    this.thingsSubscription = this.myService.getThings()
        .subscribe(things => this.things = things);
  }
}