I added the code in User Edit modal to set the active tab on show but it fails as tabs are not initialized?
Any ideas?
@ViewChild('userTabs') userTabs: TabsetComponent;
selectTab(tab_id: number) {
//console.log("setting active tab: " + tab_id);
// this fails as tabs not defined
if (this.userTabs.tabs)
this.userTabs.tabs[tab_id].active = true;
}
in show function
if (this.activeTab != null) {
var tabi = this.activeTab;
this.activeTab = null;
this.selectTab(tabi);
}
Thanks for insights
7 Answer(s)
-
0
Hi, You can add "active show" css classes for initial selection.
[attachment=0:1q00ioti]active_tab.jpg[/attachment:1q00ioti]
-
0
@alper thanks! I was hoping there is a proper angular way of doing vs removing, adding style classes by hand.
-
0
@vladsd please check <a class="postlink" href="https://valor-software.com/ngx-bootstrap/#/tabs">https://valor-software.com/ngx-bootstrap/#/tabs</a>.
-
0
@ismcagdas - thanks, that is where I got the code. In modal dialogs it does not work as tab not initialized on load, on init, etc. test for yourself, the code below does not work in modal dialog. this.staticTabs.tabs is NULL
import { Component, ViewChild } from '@angular/core'; import { TabsetComponent } from 'ngx-bootstrap'; @Component({ selector: 'demo-tabs-manual', templateUrl: './manual.html' }) export class DemoTabsManualComponent { @ViewChild('staticTabs') staticTabs: TabsetComponent; selectTab(tab_id: number) { this.staticTabs.tabs[tab_id].active = true; } disableEnable() { this.staticTabs.tabs[2].disabled = !this.staticTabs.tabs[2].disabled; } } -
0
@vladsd, here is what I did.
- changed tabset in user create edit dialog like below (only added "#userTabs");
<tabset class="tab-container tabbable-line" #userTabs>- Then copied your code like below;
selectTab(tab_id: number) { //console.log("setting active tab: " + tab_id); // this fails as tabs not defined if (this.userTabs.tabs) this.userTabs.tabs[tab_id].active = true; }- placed the below code in onShown method;
this.selectTab(1);and then it selected roles tab.
-
0
thanks, the key was to use in onShown method;
-
0
yeap only onShown you can get reach the DOM elements. congrats ;)
