Ngx-bootstrap: Tabs fire off activations during OnDestroy

[slubowsky]

TabDirective.ngOnDestroy calls TabsetComponent.removeTab which checks if this.isDestroyed before continuing on and causing the next tab to be activated. The TabsetComponent component sets isDestroyed to true in ngOnDestroy. SO it appears that no events should be fired during compnent tear down.

Unfortunately it appears to me (using 2.0.0-rc.4) that OnDestroy is called in reverse order. First each tab then the tabset (and then my component which contains them)

I see the same behavior when putting breakpoints in the ng2-bootstrap demo page and watch things deconstruct from the tabs page when I click on another link.

See also https://github.com/valor-software/ng2-bootstrap/issues/610 which sounds very similar

[valorkin]

ok, got it
it will be hard one, but possible

[PEsteves8]

Any news on this? I need this to update the route on tab select, however when it's destroyed it navigates to the route defined in the (select) event handler.

Currently I'm using (click) on the heading span to do that (which is not ideal since it doesn't cover the entire tab heading section). Thanks :)

[sasapet]

I do need this fixed too; I have the same issue as PEsteves8.

[xwb1989]

Seeing the same issue. Would like to see it fixed.

[yippeeH]

Any update on this? Having the same issue and hope it gets fixed soon.

[ipassynk]

This is the workaround that works for me. I use tab with (select) event to navigate between tabs using angular route.

````
this.routeEvents$ = this.router.events
.filter(event => event instanceof NavigationStart).subscribe(() => {
this.isNavigation = true;
});

ngOnDestroy() {
this.routeEvents$.unsubscribe();
}

selectTab(route) {
if (!this.isNavigation) {
let link = [${route}];
this.router.navigate(link);
}
}
````

[hgoebl]

@ipassynk do you set this.isNavigation to false somewhere? Or is it not necessary?

[ipassynk]

yes, it is false on init. As soon as a router navigation started I do not want to receive 'select' event from tabs component and isNavigation flag does the trick for me.

[sasapet]

My solution: I changed the source node_modules\ng2-bootstrap\components\tabs\tabset.component.js,
by commenting line 70:
// this.tabs[newActiveIndex].active = true;

This might affect, thought, cases where you dynamically add/remove tabs, but it worked fine for me.

[xwb1989]

Found a simple fix:

import { TabDirective } from 'ng2-bootstrap';
TabDirective.prototype.ngOnDestroy = function () {
  /** 
   * We don't need to remove the tab itself from tabset during destroy because:
   * 1. If the destroy is triggered by closing the tab, the tab would have been already removed from the tabset
   * 2. If the destroy is triggered by switching to another route, the whole tabset will also be destroyed as well,
   *    therefore, there is no need to do the removal here.
   */
  // this.tabset.removeTab(this);
};

Not sure whether this would break other stuff, but it works for me.

[valorkin]

@xwb1989 simple and good solution, let's try

[xwb1989]

Hope this can go into next release, then I can remove this hack patch from my code 😃