CODEWITHSUNDEEP
angularasynchronousrxjs
Girzu
Girzu

Reputation: 21

Angular - Data loader - async binding or normal

I would like to add a universal loader (spinner or something like this) in Angular 7 application. When I go to the specific route (page), firstly I get data from the server. During request, the loader should be visible.

A first simple solution is a service like here:

class PendingService {
    active = 0;
    isActive = false;

    start() {
        this.active++;
        this.isActive = true;
    }

    stop() {
        this.active--;

        if (this.active === 0) {
            this.isActive = false;
        }
    }
}

and use it like:

pendingService.start();
data.get().subscribe(null, null, () => pendingService.stop());

with binding:

<spinner [hidden]="!pendingService.isActive"></spinner>

Second is using rjxs and use where pending will be observable boolean.

<spinner [hidden]="pendingService.pending | async"></spinner>

What solution will be more proper and faster for Angular 7?

Upvotes: 0

Views: 273

Answers (1)

Vitalii Chmovzh
Vitalii Chmovzh

Reputation: 2943

There's no "proper" way, but async pipe has the main advantage that it will automatically unsubscribe from Observable when the component is destroyed. You will not need to store subscription into variable and unsubscribe in ngOnDestroy() hook.

Upvotes: 1

Related Questions