figuerres / ng-busy

Show busy/loading indicators on any promise, or on any Observable's subscription.

ng-busy

ng-busy can show busy/loading indicators on any promise, or on any Observable's subscription.

Rewritten from angular-busy, and add some new features in terms of Angular 2.

Built with Angular 2.4.0

---

WORK IN PROGRESS !!! at this time not packaged for npm install !!

---

Demo

figuerres.github.io/ng-busy/demo/asset/

Installation

npm install --save ng-busy

Link CSS

<link rel="stylesheet" href="/node_modules/ng-busy/build/style/busy.css">

Getting Started

Import the BusyModule in your root application module:

import {NgModule} from '@angular/core';
import {BusyModule} from 'ng-busy';

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

Reference your promise in the ngBusy directive:

import {Component, OnInit} from '@angular/core';
import {Http} from '@angular/http';

@Component({
    selector: 'some',
    template: `
        <div [ngBusy]="busy"></div>
    `
})
class SomeComponent implements OnInit {
    busy: Promise<any>;

    constructor(private http: Http) {}

    ngOnInit() {
        this.busy = this.http.get('...').toPromise();
    }
}

Moreover, the subscription of an Observable is also supported:

// ...
import {Subscription} from 'rxjs';

// ...
class SomeComponent implements OnInit {
    busy: Subscription;

    // ...

    ngOnInit() {
        this.busy = this.http.get('...').subscribe();
    }
}

Directive Syntax

The ngBusy directive expects a busy thing, which means:

• A promise
• Or an Observable's subscription
• Or an array of them
• Or a configuration object

In other words, you may use flexble syntax:

<!-- Simple syntax -->
<div [ngBusy]="busy"></div>

<!-- Collection syntax -->
<div [ngBusy]="[busyA, busyB, busyC]"></div>

<!-- Advanced syntax -->
<div [ngBusy]="{busy: busy, message: 'Loading...', backdrop: false, delay: 200, minDuration: 600}"></div>

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 string	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.
wrapperClass	Optional	'ng-busy'	The name(s) of the CSS classes to be applied to the wrapper element of the indicator.

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:

import {NgModule} from '@angular/core';
import {BusyModule, BusyConfig} from 'angular2-busy';

@NgModule({
	imports: [
    	// ...
        BusyModule.forRoot(
        	new BusyConfig({
            	message: 'Don\'t panic!',
                backdrop: false,
                template: `
                    <div>{{message}}</div>
                `,
                delay: 200,
                minDuration: 600,
                wrapperClass: 'my-class'
            })
        )
    ],
	// ...
})
export class AppModule

FAQ

The indicator's position is not inside the ngBusy container

You may add position: relative style to your ngBusy container.

SystemJS Config?

You may need this in your systemjs.config.js:

{
    paths: {
        'npm:': 'node_modules/'
    },
    map: {
        // ...
        'ts-metadata-helper': 'npm:ts-metadata-helper',
        'angular2-dynamic-component': 'npm:angular2-dynamic-component',
        'ng-busy': 'npm:ng-busy'
    },
    packages: {
        // ...
        'ts-metadata-helper': {
            defaultExtension: 'js'
        },
        'angular2-dynamic-component': {
            defaultExtension: 'js'
        },
        'ng-busy': {
            main: './index.js',
            defaultExtension: 'js'
        }
    }
}

TODO

• Provide custom animations for the indicator

• Unit & E2E test

Credits

adapted from https://github.com/devyumao and updated to work with Angular-Cli builds and to have metadata for the package.

Rewritten from cgross's angular-busy.

Inspired by ajoslin's angular-promise-tracker.

LICENSE

This project is licensed under the MIT license. See the LICENSE file for more info.

ng-busy's Issues

Change animation

Hello.

Right now ng-busy appears with a kind of "slide down" animation.

How can I change it?

update code and build process

need to update the code and the build process for AOT / Angular-Cli.

not an ngModule in angular2-dynamic-component package

update in angular2-dynamic-component fixes an issue with AOT build.

https://github.com/apoterenko/angular2-dynamic-component/issues/26

will update with this and soon be able to publish.

Status of the busy component

To anyone who has been watching.

I now have the code for the busy working in a test project !
tomrrow i will post the code here with the following issues:
*** not packaged for NPM install yet. ***

I was able to get a dpendancy updated to fix an issue and was abele to use the code in a project.
the code i will load tomrrow can be used as a module in a project by downloading it and copying it into a project.
I have not built an NPM / Angular 2 package before and will be working on how to do that after i first update this repository withi the updated project. i *might * get the package published sometime tomrrow if i am lucky.
but when i upload the code you can use it to get you going... just not all packaged up into the node_modules folder yet!

goals for this package

• work with angular-cli
• update to current packages
• follow standards for angular 2 feature modules
• see if any dependancies can be removed to simplify the module

after that list is done i will start to look at adding features to the package.