Angular version 9.

| Angular 9

| >=v9.0.1

Browsers support

IE / Edge	Chrome
IE11, Edge	last 2 versions

Demo

Show Case

Installation

ngx-waiting is available via npm

Using npm:

$ npm install ngx-waiting --save

Usage

Import NgxWaitingModule in in the root module(AppModule):

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { NgxWaitingModule } from "ngx-waiting";

@NgModule({
  imports: [
    // ...
    NgxWaitingModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Add NgxWaitingService service wherever you want to use the ngx-waiting.

import { NgxWaitingService } from "ngx-waiting";

class AppComponent implements OnInit {
  constructor(private waiting: NgxWaitingService) {}

  ngOnInit() {
    /** waiting starts on init */
    this.waiting.show();

    setTimeout(() => {
      /** waiting ends after 5 seconds */
      this.waiting.hide();
    }, 5000);
  }
}

Now use in your template

<ngx-waiting></ngx-waiting>

Methods

• NgxWaitingService.show() Shows the waiting
• NgxWaitingService.hide() Hides the waiting

Available Options

• [bgColor]: String. #fff, red, blue etc...
• [color]: Any css color format. To set color of waiting, default #fff
• [type]: Waiting type from Load Awesome ex. timer.
• [fullScreen]: Boolean [true or false]
• [name]: Multiple waiting with in same presentation layer component

Using waiting Type

<ngx-waiting
  bgColor="rgba(51,51,51,0.8)"
  [fullScreen]=false
  color="#fff"
  type="timer"
  name= "demo"
>
  <p>Loading...</p>
</ngx-waiting>

---

Author

Aishvarya Shrivastava

• @GitHub

Thanks to

Load Awesome by Daniel Cardoso.

License

ngx-waiting is MIT licensed.