angular2-busy-directive

Angular 2 busy directive

This is a simple package which can show a loading indicator based on an observable.

The package comes with a default loading component. However it is possible to inject your own.

Installation

npm i --save angular2-busy-directive

Setup

First thing you need to do is import the BusyModule into your root module.

@NgModule({
    declarations: [...]
	imports: [
        BusyModule,
        ...

    ],
	providers: [...]
})
export class AppModule {

}

The second thing you need to do is use the rvBusy directive on an html tag.

@Component({
    selector: 'app-sample',
    template: `
        <div [rvBusy]="locations$">
            <pre>{{locations$ | async}}</pre>
        </div>
    `
})
class SampleComponent implements OnInit {
    locations$: Observable<any>;

    constructor(private http: HttpClient) {}

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

That's all!

Custom loading component

To inject your own loading component you have to do the following.

Declare your component in the entryComponents of your root module.

@NgModule({
    declarations: [...]
	imports: [
        BusyModule,
        ...

    ],
    entryComponents: [
        MyCustomComponent
    ],
	providers: [...]
})
export class AppModule {

}

Inject your component into the directive rvComponent.

@Component({
    selector: 'app-sample',
    template: `
        <div [rvBusy]="locations$" [rvComponent]="component">
            <pre>{{locations$ | async}}</pre>
        </div>
    `
})
class SampleComponent implements OnInit {
    locations$: Observable<any>;
    component = MyCustomComponent;

    constructor(private http: HttpClient) {}

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