Feature: NgBusy use within more complex piped operators about angular-opensource HOT 3 OPEN

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.

from angular-opensource.

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

from angular-opensource.

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;
    });
  };
}

from angular-opensource.