ngOnDestroy hook not called for custom component set as template

[Syeda-Urooj-Fatima]

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?

[victos]

When the loader disappears, the event busyStop will be called. You can use that event instead as a workaround.

[Syeda-Urooj-Fatima]

@victos The use case that I am trying to fulfil is a tad bit different. I would like to know of the disappearance of loader from the .ts file instead of the template. Is there any way we can know of the disappearance of the loader from the .ts file?

[harleybl]

@victos - FYI - The fix contributed to version 12.0.2 for this issue breaks NgBusy in a way that is hard to diagnose. Basically, the following code will get called when the first usage of ngBusy is done. Subsequent assignments to the busy promise with a new message will fail to display the component, but with the old message.

/** the new part in the directive that appears to cause the issue */
if (this.componentViewRef) {
        this.appRef.detachView(this.componentViewRef);
        this.componentViewRef.destroy();
      }

I rolled back my application to 12.0.1 and the ngBusy message now updates as expected when I change the message and assign a new promise to the busy defined in the template.