[Tabset] Nb-tabs: conditional switching

[pjyoti1235]

I have an nb-tabs with multiple nb-tabs the switching is working fine but I want a next button which should be able to direct me to the next tab..I don't know how to implement this .kindly help

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [ ] feature request

Issue description

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[nnixaa]

Hi @pjyoti1235, I believe you just need an array of your tabs, then generate the tabs based on that array and also have an active attribute within your data. So that you can change the active state and it will automatically change the active tab in your tabset: in your component:

tabs = [ { title: 'Tab1', active: false }, { title: 'Tab2', active: true } ];

<nb-tabset>
 <nb-tab *ngFor="let tab of tabs" [tabTitle]="tab.title" [ative]="tab.active">
   Tab content 1
 </nb-tab>
 </nb-tabset>

Then on click on your next button you can change which tab is active. Hope this helps.

[pjyoti1235]

Thanks @nnixaa ..i tried this working fine..now the issue that i am facing is when i dont change the tab (using button) more than two tabs are getting selected i am guessing this is due to the activation of tab when i click the title so how do i keep a track of which tab is currently active?

[nnixaa]

Hi @pjyoti1235, you can track the tab activation using changeTab and add there some logic to keep it in sync with your custom behavior.

[pjyoti1235]

Thanks @nnixaa it worked for me

[pjyoti1235]

Hi can we have a conditional switching of tab when we click it...like u have a popup and when I click cancel the tab shouldn't get changed and when I click ok it should move ahead to next tab

[nnixaa]

Hi @pjyoti1235, sorry for the late response, but unfortunately this is not possible out of the box.

[Morta1]

hey @nnixaa, are you considering adding this feature in the future?

[DJAG95]

in vue-native it doesn't seem to work the same way, the :active="true" property doesn't work.

I have searched a lot about how it could work for Vue-native, but none of the solutions seem to be valid for me.

I will publish here my solution when I find it

[aaron-neal]

I had the same need and have come up with a way that works for me:

1. You need to use the active input on the nb-tab to select the correct tab.
2. @ViewChild('tabset') tabSet: NbTabsetComponent Get access to the tabset component from the component
3. override the tabset selectTab function that changes the tabs in nebular You can pass in the current scope giving you access to variables for decision making.
4. Use a function to determine if you want to allow tab changes and then set the correct tab as active.

[sasasancei]

1. select id nb-tabset in HTML
2. @ViewChild('tabset') tabSet: NbTabsetComponent Get access to the tabset component from the component

3. let tab = this.tabSet.tabs; tab.forEach((tab) => { if (nomedatab == tab.tabTitle) { tab.activeValue = true; tab.init = true; this.view = nomedatab; } if (nomedatab !== tab.tabTitle) { if (tab.activeValue == true) { tab.activeValue = false; } if (tab.init == true) { tab.init = false; } } });