feat(tabs): add functionality of canceling a tab removal

[inkidotcom]

I'm trying to display an alert before a tab is removed however I'm not able to find a way to cancel the tab removal. I'm sure I'm missing something simple, but I can't find the solution.

[adrianfaciu]

You have the removable property on the Tab component. If false, the remove button will not be displayed. Can this work for you ?

[slubowsky]

@inkidotcom I have a similar issue, want to veto tab selection. See https://github.com/valor-software/ng2-bootstrap/issues/699. Perhaps my workaround there might work for you as well

[inkidotcom]

@slubowsky not quite, but thanks.

from components/tabs/tabset.component.ts

public removeTab(tab:TabDirective):void {
    let index = this.tabs.indexOf(tab);
    if (index === -1 || this.isDestroyed) {
      return;
    }
    // Select a new tab if the tab to be removed is selected and not destroyed
    if (tab.active && this.hasAvailableTabs(index)) {
      let newActiveIndex = this.getClosestTabIndex(index);
      this.tabs[newActiveIndex].active = true;
    }

    tab.removed.emit(tab);
    this.tabs.splice(index, 1);
  }

so it looks like the last line is firing no matter what:

this.tabs.splice(index, 1);

[inkidotcom]

@adrianfaciu I guess I can create my own remove button instead of using the built-in option. I was just looking for a way to stop the removal of the tab using the existing remove handler functionality.

[valorkin]

@inkidotcom I am still looking for a nice solution to prevent user actions user -> bs comp -> my app code -> bs comp

[xwb1989]

I'm very in need of this feature as well.

A possible API in my mind can be exposing an API in Tab:

onTabRemovalHandler: () => Promise<boolean>

Before BS comp really removes the tab, it calls this user-defined callback first, and if it resolves to true, continue the removal; abort otherwise.

[valorkin]

better to create onChange on onRemove

[studentIvan]

👍 +1 to this bug

[srikarshastry]

any update on this please? I'm facing the similar. Any help/dirty hack(workaround) is greatly appreciated

[epitomz]

@hotdog1987 you can just implement your own button to close the modal depending on a modal or whatever you want. You just need to hide the bs-remove-tab with some css code and you're done.

P.S: your closing method should be just something like this.tabs.splice(this.tabs.indexOf(tab), 1);

[DebolaA]

having the same issue too; i will implement my own remove button; this request should be dealt with please. thank you

[neo1380]

I have fixed it by introducing two new input properties to the tab. the two properties are

• lazyRemove [ boolean ]
• canRemove [ boolean ]

Inside remove method, i am validating the lazyRemove, if it is true then we simply return without removing the tab. basically blocking the below line:

if (tab.lazyRemove) { return; }

this.tabs.splice(index, 1);

So, now we emit an event to the consuming component that remove event is triggered. On listening to this event, we can display a modal with buttons as yes or no. And on clicking of Yes, which confirms that we can remove the button, we change the canRemove boolean to true.

Now, when this is set to true, we trigger the method to remove the tab with lazyRemove setting to false;