Base solution for your next web application
Open Closed

setting active tab on load #4753

User avatar
0
vladsd created

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

Go to accepted answer
7 Answer(s)
  • User Avatar
    0
    alper created
    Support Team

    Hi, You can add "active show" css classes for initial selection.

    [attachment=0:1q00ioti]active_tab.jpg[/attachment:1q00ioti]

  • User Avatar
    0
    vladsd created

    @alper thanks! I was hoping there is a proper angular way of doing vs removing, adding style classes by hand.

  • User Avatar
    0
    ismcagdas created
    Support Team

    @vladsd please check <a class="postlink" href="https://valor-software.com/ngx-bootstrap/#/tabs">https://valor-software.com/ngx-bootstrap/#/tabs</a>.

  • User Avatar
    0
    vladsd created

    @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;
  }
}
  • User Avatar
    0
    ismcagdas created
    Support Team

    @vladsd, here is what I did.

    1. changed tabset in user create edit dialog like below (only added "#userTabs");
    <tabset class="tab-container tabbable-line" #userTabs>
    1. 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;
}
    1. placed the below code in onShown method;
    this.selectTab(1);

    and then it selected roles tab.

  • User Avatar
    0
    vladsd created

    thanks, the key was to use in onShown method;

  • User Avatar
    0
    alper created
    Support Team

    yeap only onShown you can get reach the DOM elements. congrats ;)

Assignee
No one
Labels
Non yet