I'm running under the following configurations
Angular CLI: 6.2.9
Node: 8.9.4
ng-busy: 6.2.0

In following your example with the following code
`@NgModule({

imports: [

        ...

        NgBusyModule.forRoot(new BusyConfig({...`

Running the build ng build --prod results in a build fail stating

Function calls are not supported in decorators but BusyConfig was called.

Is there something I'm missing that ought to be done?

I have structure like

<div class="position-relative">
   <div [ngBusy]="subscription"> </div>
<div>

<div class="position-relative">
    <div [ngBusy]="subscription"> </div>
<div>

These divs have totally different positions on single page. But top one of them is displayed, removing the one displays the other one. Not sure if I am using in a wrong way or making any mistake.

Hello,

We're using Angular 15, which needs the dependency for rxjs ^7.4.0, but ng-busy needs ^7.2.0 -.-
Could you add the other version?

I am using a 3rd party library that returns a non-es6 promise from a function call, and passing it to ngBusy. This results in the following error:

app.module.ts:77 TypeError: busy.add is not a function
    at BusyTrackerService.push../node_modules/ng-busy/fesm5/ng-busy.js.BusyTrackerService.addToBusyQueue (ng-busy.js:272)
    at ng-busy.js:254
    at Array.forEach (<anonymous>)
    at BusyTrackerService.push../node_modules/ng-busy/fesm5/ng-busy.js.BusyTrackerService.loadBusyQueue (ng-busy.js:253)
    at BusyTrackerService.push../node_modules/ng-busy/fesm5/ng-busy.js.BusyTrackerService.load (ng-busy.js:165)
    at NgBusyDirective.push../node_modules/ng-busy/fesm5/ng-busy.js.NgBusyDirective.ngDoCheck (ng-busy.js:592)

A quick peek at the source code shows that ngBusy detects if the "busy thing" is a promise by calling busy instanceof Promise:

if (busy instanceof Promise) {
            busy.then.call(busy, function () { return _this.onBusyComplete(busy); }, function () { return _this.onBusyComplete(busy); });
        }
        else {
            busy.add(function () { return _this.onBusyComplete(busy); });
        }

This returns false for non-es6 promises. Perhaps a better approach would be to test if busy has a then method, ie:

if (typeof(busy.then === "function")) {
            busy.then.call(busy, function () { return _this.onBusyComplete(busy); }, function () { return _this.onBusyComplete(busy); });
        }
        else {
            busy.add(function () { return _this.onBusyComplete(busy); });
        }

This would work with promises from any promise library, or any "thenable" object

Using v6.1.3 of ng-busy I'm getting this error when trying to use the directive. I've set up the global config and then apply the directive like the examples.

Error:

logger.service.ts:79 StaticInjectorError(AppModule)[message]: 
  StaticInjectorError(Platform: core)[message]: 
    NullInjectorError: No provider for message! 
zone.js:192 Uncaught Error: StaticInjectorError(AppModule)[message]: 
  StaticInjectorError(Platform: core)[message]: 
    NullInjectorError: No provider for message!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8369)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
    at resolveNgModuleDep (core.js:8369)

Config:

export const busyConfig = <BusyConfig>{
  backdrop: true,
  template: BusyMessageComponent,
  delay: 50,
  minDuration: 600,
  wrapperClass: 'ng-busy'
};

Directive Usage:

  <div [ngBusy]="busy"
       (busyStop)="onBusyStop($event)"
       (busyStart)="onBusyStart($event)">
  ...
</div>

Tried to implement a delay in this way

NgBusy was recently upgraded to Angular 13, but rxjs wasn't done at the same time, Could this be upgraded to at least 7.4.0 please to avoid issues when upgrading projects to Angular 13?

Angular was updated here #31

Is it possible to get this package updated with Angular 15 support? Trying to upgrade an application and this package is currently blocking

The spinner and 'Please wait' text are not visible if the page has been scrolled down.

The issue is partially fixed if the following css is added from here
.ng-busy-default-spinner, .ng-busy-backdrop { position: fixed; }

The spinner is displayed alright, but the text 'Please wait' is gone.
Any ideas how to fix this?

please update package to support Angular 13

Hi,
We are trying to use your ngbusy directive using your 6.0.0-alpha1 version.

This works fine using the ngbusy directive when parsing in an array or busy config (via object syntax), but the directive does not seem to work when passing a subscription object from a component.

e.g.
These work fine:-

Currently [ngBusy] only works with Promises or an Observables' Subscription. I'm using a lot of async pipes in my code, so I never have to subscribe to Observables in the components. A workaround is calling toPromise() on an observable before passing it to ngBusy. It would be cleaner if ngBusy allowed us to use Observables from the start without having to toPromise them or manually subscribe

#23 added

When I use this component inside a NgbModal (@ng-bootstrap/ng-bootstrap), if I open the modal the following error is thrown:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
at viewDebugError (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:8788)
at expressionChangedAfterItHasBeenCheckedError (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:8776)
at checkBindingNoChanges (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:8878)
at checkNoChangesNodeInline (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:11744)
at checkNoChangesNode (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:11733)
at debugCheckNoChangesNode (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:12340)
at debugCheckDirectivesFn (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:12268)
at Object.eval [as updateDirectives] (NgBusyComponent.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:12257)
at checkNoChangesView (vendor.js?v=Tut4bBYk9PJL-Z2LQxJK1uSlrX3UgACZCXqXLLPxoBg:11632)

Inside: NgBusyComponent.html

<div [class]="wrapperClass" @flyInOut *ngIf="isActive">
  <ng-content></ng-content>
</div>

The old version (1.4,X) works fine but the new version (6.0.0.rc1) has this problem.
How can I solve?

I'm using the ng-busy package with the following configurations:

ng-busy: 9.0.0
Angular & Angular CLI: 10.1.2
Node: 12.16.3

I have created a custom loader component and set it as the template when configuring the NgBusy module in my Angular application.

NgBusyModule.forRoot(<BusyConfig>{
      message: null,
      backdrop: true,
      template: LoaderComponent,
      wrapperClass: 'ng-busy'
    })

Issue
On completion of an observable (tied with an HTTP call to an API server), the loader disappears from the screen as expected. However, the ngOnDestroy hook of the custom Loader component is not called.
The custom Loader component's ngOnInit hook is called just fine as soon as the loader appears on the screen. However, the converse doesn't happen on completion of the API call.

Does the ng-busy package not support destruction of a custom component passed to it as template? Or is something incorrect regarding the configuration or usage of the module?

I just updated from Angular 5.2 to 6, and in support of that upgraded to "ng-busy": "^6.0.0-rc1".

I have a page that gets a list of objects. It iterates over that list and creates a component for each of the objects. Each version of that component has a button to export an excel file related to that object. Each component also has a busy div like

On button click, this method runs

exportMatchResults() {
this.fileDownload = this.matchingService.downloadMatchResults(this.result.id, ${this.result.dataSource.name}-${new Date().toLocaleString()}).subscribe();
}

On the previous version everything was self contained into the component, such that when I click the export in a single component, the busy throbber only appears over that specific component. After the update, when clicking any export, ALL busy throbbers appear. I think this may be related to the same named subscription, even though they are in different components, or if it is somehow registering all busy's on the page to the same throbber.

Any thoughts on why this is happening? I've attached a couple of images to demonstrate what the page looks like and the throbber behavior.

With Angular2-Busy I could start and stop the busy indicator with a boolean.

<div [ngBusy]="{busy: isBusy}">
With my controller like:
isBusy = true

When I try that with ng-busy I get the following error:

ERROR TypeError: busy.add is not a function
at BusyTrackerService.push../node_modules/ng-busy/fesm5/ng-busy.js.BusyTrackerService.appendToQueue (ng-busy.js:233)
at ng-busy.js:219
at Array.forEach ()
at BusyTrackerService.push../node_modules/ng-busy/fesm5/ng-busy.js.BusyTrackerService.loadBusyQueue (ng-busy.js:207)
at BusyTrackerService.push../node_modules/ng-busy/fesm5/ng-busy.js.BusyTrackerService.load (ng-busy.js:156)
at NgBusyDirective.push../node_modules/ng-busy/fesm5/ng-busy.js.NgBusyDirective.ngDoCheck (ng-busy.js:408)
at checkAndUpdateDirectiveInline (core.js:18671)
at checkAndUpdateNodeInline (core.js:19932)
at checkAndUpdateNode (core.js:19894)
at debugCheckAndUpdateNode (core.js:20528)

Please... upgrade to angular 17

ngBusy does not allow you to update your message.

For example, if you were to do this:

readonly busy$= new Subject<IBusyConfig>;

busy$.next({
    busy: [promise1],
    message: "message 1"
})

busy$.next({
    busy: [promise2],
    message: "message 2"
})

and then in your template have

<div [ngBusy]="busy$|async">

if would only show ever show the message "message 1", even when waiting for promise2 to resolve. The expected behaviour would be to update the message dynamically and display "message 2"

I created a pull request to update to Angular V12

#26

In angular 17 standalone app, the entire app is disabled, not only the target part.

Steps to reproduce:

1. create a new app: ng new signal-busy --skip-tests --standalone --no-ssr --directory=. --style=scss

2. install ng-busy: npm i ng-busy

3. add in angular.json:
   "styles": [
   ...
   "node_modules/ng-busy/src/style/busy.css"
   ]

4. add in styles.scss:
   html,
   body {
   height: 100%;
   }

5. add in app.config.ts:
   export const appConfig: ApplicationConfig = {
   providers: [ ..., importProvidersFrom([BrowserAnimationsModule]) ],
   };

6. add in app.componet.ts:
   @component({
   ...
   imports: [..., NgBusyModule],
   })
   export class AppComponent {
   ...
   busy: Subscription[] | undefined[] = [undefined, undefined, undefined];

   simulate(idx: number): void {
   this.busy[idx] = of(void 0).pipe(delay(4000)).subscribe();
   setTimeout(() => { this.busy[idx] = undefined; }, 5000);
   }
   }

7. add in app.component.scss:
   button {
   font-size: 25px;
   padding: 10px;
   margin: 5px;
   }

:host {
display: flex;
height: 100%;
}

div {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}

8. replace app.component.html with:
   <div [ngBusy]="busy[0]">
   <button (click)="simulate(0)">Click Me!</button>
   </div>
   <div [ngBusy]="busy[1]">
   <button (click)="simulate(1)">Click Me!</button>
   </div>
   <div [ngBusy]="busy[2]">
   <button (click)="simulate(2)">Click Me!</button>
   </div>

Click any button. Entire app is disabled, instead of the coresponding part.
signal-busy.TGZ

With Angular2-Busy I could start and stop the busy indicator with a boolean.

Would it be possible to get access to the instance of BusyTrackerService? I've tried to dependency inject it into my app and parent components so I could tell globally if anything was busy, but even though I've got the import correct it doesn't seem to exist.

Would be great to have a boolean signal as source of the input.
signal-busy.TGZ

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) => { ... }
  );

After the ugrade to angular 6.0.3 and ng-busy ^6.0.0-rc0 I get the error:

Cannot redeclare block-scoped variable 'ngDevMode'

when the app is running in dev.
I notice that inside ng-busy folder in node_modules folder there is another node_modules folder with core, common and animations modules installed.
These are duplicates as of I installed those dependencies in through the app root packages.json.

How can I solve?

I'm trying to make the busy indicator showing only for the div that is declaring the [ngBusy], but the actual result is it shows for the whole page.

I make a demo here: https://stackblitz.com/edit/angular-ivy-9zygom

Did I do something wrong?

Hi Victos,

I am using your package. Thanks for developing it!
However, when I use ng-busy to listen to a subscription like this:
<div [ngBusy] = "mySubscription">
I don't know if I need to unsubscribe from it. Does ngBusy have the same mechanism as the "async" pipe?
Looking forward to your reply.

Thanks,
Amori

I have a question.
I'm trying to implement your solution for custom template component.
I've managed to do so. The problem I ran into is customize the template component. e.g. pass with and height values that will change the template size.
Can you help me, how do I manage to do so?
10x

When I use the following as a template:

import { Component } from '@angular/core';

@component({
selector: 'default-busy',
template: <mat-spinner style="margin:0 auto"></mat-spinner>,
})
export class ProgressIndicatorComponent {
constructor() { };
}

I get an ExpressionChangedAfterItHasBeenCheckedError.

If I use *ngIf in my template, I get the following error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'