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

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
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]

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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>.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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;
  }
}
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    vladsd created

    thanks, the key was to use in onShown method;

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    alper created
    Support Team

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

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet