Topic: MDB Angular Pro Tabs - Set Default Active Tab
https://mdbootstrap.com/angular/components/tabs/
It is not immediately clear to me how to set the default selected tab when the tabset component initializes. I've attempted to add an 'active' class and a data-toggle="tab" attribute to an mdb-tab element, without success.
Is there a way to do this?
Thanks!
Nick
Add comment
Dear nick.celestin,
You can programmatically select any tab as follow:
app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { TabsetComponent } from 'ng-mdb-pro/pro/tabs-pills/tabset.component';
@ViewChild('staticTabs') staticTabs: TabsetComponent;
ngOnInit() {
this.staticTabs.tabs[2].active=true;
}
I think in the newer version you have to use the:
import { AfterViewInit } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { MdbTabsComponent } from 'mdb-angular-ui-kit/tabs';
@ViewChild('tabs') tabs: MdbTabsComponent;
ngAfterViewInit() {
this.tabs.setActiveTab(1);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags