I have three tabs and 3 buttons in my page and I am using ng2 bootstrap tabs. Based on the tab selected few buttons has to be disabled/ enabled .
<tabset>
<tab heading="tab1">tab1 content</tab>
<tab (select)="tab2ButtonsEnable()" (deselect)="tab1ButtonsEnable()">
<template tabHeading=" tab2"> tab2 content
</template>
<tab (select)="tab3ButtonsEnable()" (deselect)="tab1ButtonsEnable()">
<template tabHeading=" tab3"> tab3 content
</template>
</template>
</tab>
</tabset>
Here my tab1 is static tab and the when this tab is selected all 3 buttons has to be disabled. When tab 2 is selected button 1 has to be enabled. When tab 3 is selected button 3 has to be enabled . I have written those logic in the methods. That is when the tab2 is selected the select() is called and makes the button1 enabled. This was working fine until I had two tabs . when I added third tab , the select() of third tab is called followed by the deselect() of tab2 since the tab2 is not selected. This makes all the buttons disabled by calling tab1ButtonsEnable().
Is it possible to add a select() to static tab ??
Or how can I restrict the deselect () from firing , the deselect of last active tab only has to be called ??
It's not that clear from the wording of your question but if you trying to enable/disable buttons depending on which tab is selected, you could do something based on the following:
// Bind button disabled property to a boolean variable for whichever tab is showing
<button type='button' [disabled]='!showtab1'> Button 1 </button>
<button type='button' [disabled]='!showtab2'> Button 2 </button>
<button type='button' [disabled]='!showtab3'> Button 3 </button>
//Bind to the tab active property, and toggle the variable when select/deselect fire
<tab heading='tab1'
[active]="showtab1"
(select)="showtab1 = true"
(deselect)="showtab1 = false">
//tab content
</tab>
.. similar for tabs 2 and 3
Unless I've misunderstood, I don't see the need for stopping propagation of any events, nor anything special about using 3 static tabs here.