0.0.2 • Published 4 years ago
ngx-waiting v0.0.2
Angular version 9.
| Angular 9
| >=v9.0.1
Browsers support
IE / Edge | Chrome |
---|---|
IE11, Edge | last 2 versions |
Demo
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 waitingNgxWaitingService.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
orfalse
- 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
Thanks to
Load Awesome by Daniel Cardoso.
License
ngx-waiting is MIT licensed.