Feature: NgBusy use within more complex piped operators

[mtpultz]

Is it (or would it be) possible to useng-busy with more complex RxJS operators like switchMap or exhaustMap on a BehaviorSubject without subscribing to an Observable within a subscribe block?

If you set busy on the BehaviorSubject it will always be busy. You also can't use tap to handle side effects either without unsubscribing in multiple places to handle edge cases since the ng-busy subscription wouldn't be directly related to the Http request.

public currentPage$ = new BehaviorSubject(1);

// ...

this.currentPage$
  .pipe(
    exhaustMap((page: number = 1) =>
      (page) ? this.getAlerts(page) : empty()
    ),
    map((response: HttpResponse<Alert[]>) => 
      response.results
    )
  )
  .subscribe(
    (alerts: Alert[]) => { ... },
    (error: any) => { ... }
  );

As I understand it from articles on RxJS Observables don't like being within Observables, but this is the only way I can see how to accomplish this using ng-busy currently:

this.currentPage$
  .subscribe(
    (page: number = 1) => {

     this.busy = this.getAlerts(page)
        .pipe(
          map((response: HttpResponse<Alert[]>) => 
            response.results
          )
        )
        .subscribe(
          (alerts: Alert[]) => { ... },
          (error: any) => { ... }
        );
    },
    (error: any) => { ... }
  );

[victos]

You can use a custom operators, maybe something like this:

export function showBusy() {
  return function showBusyOperatorImplementation(source) {
    return Observable.create(subscriber => {
      const angularBusyService = ServiceLocator.injector.get(AngularBusyService);
      const subscription = source.subscribe(value => {
          try {
            subscriber.next(value);
          } catch (err) {
            subscriber.error(err);
          }
        },
        err => subscriber.error(err),
        () => subscriber.complete());
      angularBusyService.busyWithProgressBar = subscription;
      return subscription;
    });
  };
}

then you can use function showBusy() in pipe, something like this.getAlerts(page).pipe(showBusy(), map(...)) . The operator showBusy used to put the busy things into a service called angularBusyService, and the directive can get the busy things from the service.

[mtpultz]

Thanks @victos I can't believe I didn't notice your answer. I've literally circled around 5 months later looking for the same answer so I can apply ng-busy between an Angular Material dialog that has been closed, and an exhaustMap of the actual request based on the response, which would work great using a pipe:

this.dialog
  .open(ConfirmDialogComponent, {
    data: { title: '...', message: `...` }
  })
  .afterClosed()
  .pipe(
    showBusy()
    exhaustMap((decision: boolean) =>
      (decision)
        ? this.resource.action(...)
        : empty()
    ),
    catchError((error: any) => { ... })
)

I understand roughly what you're doing in the above example having created few simple reusable operators, but nothing like your example, and I'm a bit confused regarding the last sentence.

Is this what you mean by the ServiceLocator and it will find the AngularBusyService? Are there any downsides to doing this... like performance? Seems to be an anit-pattern for DI based on some reading. Alternatively, I was trying to DI the AngularBusyService from the parent component and pass it into showBusy as a param, but can't seem to find or import it.

import {Injector} from "@angular/core";

export class ServiceLocator {
    static injector: Injector;
}

That gets used like:

import {ServiceLocator} from './locater.service.ts';

export class AppModule {
    constructor(private injector: Injector){    // Create global Service Injector
        ServiceLocator.injector = this.injector;
    }
}

export function showBusy() {
  return function showBusyOperatorImplementation(source) {
    return Observable.create(subscriber => {
      const angularBusyService = ServiceLocator.injector.get(AngularBusyService);
      const subscription = source.subscribe(value => {
          try {
            subscriber.next(value);
          } catch (err) {
            subscriber.error(err);
          }
        },
        err => subscriber.error(err),
        () => subscriber.complete());
      angularBusyService.busyWithProgressBar = subscription;
      return subscription;
    });
  };
}

[victos]

I use the ServiceLocator just because I don't want to pass it in to showBusy as a param.