Aish0507/ngx-waiting

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.

Aish0507 / ngx-waiting