devyumao / angular2-busy

Show busy/loading indicators on any promise, or on any Observable's subscription.
http://devyumao.github.io/angular2-busy/demo/asset/
MIT License
314 stars 102 forks source link

Show/Hide without promise #71

Open tomerpeled opened 7 years ago

tomerpeled commented 7 years ago

Is there a simple way to show/hide the loading component without assigning it to a promise? I mean just by Showing/Hiding it directly via a component?

LaloHao commented 7 years ago

I'm interested in this aswell

Pennywise83 commented 7 years ago

up

Sn0oze commented 7 years ago

You can just assign a boolean variable without using promises or observables in order to manually display the overlay.

[ngBusy]="{busy: showBusy, message: 'Loading...', backdrop: true, delay: 0, minDuration: 1000}"

ngOnInit() { this.showBusy= false; }

And just display it manually.

someMethod() { this.showBusy = true; // Do something this.showBusy = false; }

Barryrowe commented 7 years ago

@Sn0oze I don't know if we just never tried it because the docs say Promise or Observable<>, or a change since before we started using it allowed it, but this is exactly how we wanted to use the library.

before we had this awkward:

private startBusyWatch(msg: string): void {
        this.busyMessage = msg;
        this.busy = this.store.select(fromRoot.getApprovalsLoading)
             .filter((value) => value === false)
             .take(1)
             .subscribe();
    }

but looks like we can just use the async pipe like we want in our template now:

    [ngBusy]="{busy: (currentState$ | async).isLoading, message: busyMessage}"

and all we have to do is swap the component's busyMessage variable.