Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noskap/ng-busy-observable
NgBusy + Observables
https://github.com/noskap/ng-busy-observable
Last synced: about 2 months ago
JSON representation
NgBusy + Observables
- Host: GitHub
- URL: https://github.com/noskap/ng-busy-observable
- Owner: noskap
- License: mit
- Archived: true
- Fork: true (victos/angular-opensource)
- Created: 2019-10-09T00:13:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-28T23:14:10.000Z (about 5 years ago)
- Last Synced: 2024-09-18T04:17:42.558Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 260 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**For Angular 6**
NgBusy can show busy/loading indicators on any Promise, Observable, or on any Observable's subscription.
[](https://www.npmjs.com/package/ng-busy-observable)
Rewritten from [ng-busy](https://github.com/victos/angular-opensource/tree/master/projects/ng-busy), to allow plain observables.
### Built with Angular 6.0.0
## Demo
[https://github.com/noskap/ng-busy-observable/](https://github.com/noskap/ng-busy-observable/)
## Installation
```shell
npm install --save ng-busy-observable
```
## Link CSS
```html
```
## Getting Started
Import the `NgBusyModule` in your root application module:
```ts
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgBusyModule} from 'ng-busy-observable';
@NgModule({
imports: [
// ...
BrowserAnimationsModule,
NgBusyModule
],
// ...
})
export class AppModule {}
```
Reference your Promise in the `ngBusy` directive:
```ts
import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Component({
selector: 'some',
template: `
`
})
class SomeComponent implements OnInit {
busy: Promise;
constructor(private http: HttpClient) {}
ngOnInit() {
this.busy = this.http.get('...').toPromise();
}
}
```
Moreover, the subscription of an Observable is also supported:
```ts
// ...
import {Subscription} from 'rxjs';
// ...
class SomeComponent implements OnInit {
busy: Subscription;
// ...
ngOnInit() {
this.busy = this.http.get('...').subscribe();
}
}
```
The Observable itself is also supported:
```ts
// ...
import {Observable} from 'rxjs';
// ...
class SomeComponent implements OnInit {
busy: Observable;
// ...
ngOnInit() {
this.busy = this.http.get('...');
}
}
```
## Directive Syntax
The `ngBusy` directive expects a ***busy thing***, which means:
- A promise
- Or an Observable's subscription
- Or an Observable
- Or an array of them
- Or a configuration object
In other words, you may use flexible syntax:
```html
```
```html
```
## Event
- busyStop : Will be triggered when the busy is done
- busyStart : Will be triggered when the busy comes out.
### Usage
```html
```
## Options
| Option | Required | Default | Details |
| ---- | ---- | ---- | ---- |
| busy | Required | null | A busy thing (or an array of busy things) that will cause the loading indicator to show. |
| message | Optional | 'Please wait...' | The message to show in the indicator which will reflect the updated values as they are changed. |
| backdrop | Optional | true | A faded backdrop will be shown behind the indicator if true. |
| template | Optional | A default template component | The template can be a template or a component. If provided, the custom template will be shown in place of the default indicatory template. The scope can be augmented with a `{{message}}` field containing the indicator message text. |
| delay | Optional | 0 | The amount of time to wait until showing the indicator. Specified in milliseconds.
| minDuration | Optional | 0 | The amount of time to keep the indicator showing even if the busy thing was completed quicker. Specified in milliseconds.|
| disableAnimation | Optional | false | Disable the animation when the spinner appear |
| wrapperClass | Optional | 'ng-busy-observable' | The name(s) of the CSS classes to be applied to the wrapper element of the indicator. |
| templateNgStyle | Optional | { } | An object that will be assigned to the custom component assigned to `template` option, if one was configured (see example below in Overriding Defaults). |
## Overriding Defaults
The default values of options can be overriden by configuring the provider of the `BusyModule`.
In the root application module, you can do this:
```ts
import {NgModule} from '@angular/core';
import {NgBusyModule, BusyConfig} from 'ng-busy-observable';
import {CustomBusyComponent} from '...'
@NgModule({
imports: [
...
NgBusyModule.forRoot(new BusyConfig({
message: 'Don\'t panic!',
backdrop: false,
template: CustomBusyComponent,
delay: 200,
minDuration: 600,
templateNgStyle: { "background-color": "black" }
}))
],
declarations: [
...
CustomBusyComponent,
...
],
entryComponents: [
CustomBusyComponent
],
})
export class AppModule
```
```ts
@Component({
selector: 'default-busy',
template: `
{{message}}
`,
})
export class CustomBusyComponent {
constructor(@Inject('instanceConfigHolder') private instanceConfigHolder: InstanceConfigHolderService) {
}
get message() {
return this.instanceConfigHolder.config.message;
}
}
```
## Credits
Rewritten from [ng-busy](https://github.com/victos/angular-opensource/tree/master/projects/ng-busy), to allow plain observables.
Which is also rewritten from [devyumao](https://github.com/devyumao)'s [angular2-busy](https://github.com/devyumao/angular2-busy).
## LICENSE
This project is licensed under the MIT license. See the [LICENSE](https://github.com/noskap/ng-busy/blob/master/LICENSE) file for more info.