angular2-busy-directive
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    Angular 2 busy directive

    Build Status

    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('...');
        }
    }

    Keywords

    Install

    npm i angular2-busy-directive

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • rubenvermeulen