MDB Angular Pro Tabs - Set Default Active Tab - Material Design for Bootstrap

Topic: MDB Angular Pro Tabs - Set Default Active Tab

nick.celestin pro asked 7 years ago

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

Dawid Adach pro answered 7 years ago

1 1 Best answer

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;
}

nick.celestin pro commented 7 years ago

Perfect! Thank you, Dawid.

Add comment

Andrea Punta answered 9 months ago

0 0 Best answer

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);
      }

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

nick.celestin

Pro User

12Support score
4Questions 1Answers

0Snippets likes 0Snippets