Topic: MDB Angular Pro Tabs - Set Default Active Tab

nick.celestin pro asked 6 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

Dawid Adach pro answered 6 years ago


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 6 years ago

Perfect! Thank you, Dawid.

Andrea Punta free answered 3 weeks ago


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


Please insert min. 20 characters.

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