0

Is there any way to set default active tab by using labels or getting the index for that label before loading (active tab once the mat tab group initialise)

another thing i’m using ngIf for the container that holds the tabs so couldnt use view child to get the indexes or couldnt successfully set selectedIndex before loading the tabs

an example:

selectedTabTitle: string = '';
selectedTabIndex: number;

@ViewChild('tabsgroup ',{static: false})
  set tabgroupp(tabgroup: MatTabGroup) {
    if(tabgroup)
      this.tabsgroup = tabgroup
    setTimeout(() => {
      this.selectedTabIndex=tabgroup._tabs["_results"].find(t=>t.textLabel== this.selectedTabTitle).position;
          }, 0);
  }

on constructor : //getting the tab title i need to set as active tab
 this.route.data.subscribe(data => {
      this.selectedTabTitle= data['type'];
    });

HTML :

<ng-container *ngIf="condition">

    <mat-tab-group (selectedTabChange)="tabchanged($event)" 
      [selectedIndex]="selectedTabIndex"  #tabsgroup >
        <mat-tab label="label 1">
            <ng-template matTabContent>
              <child-component> </child-component>
                  </ng-template>
                           </mat-tab>
      <mat-tab label="label 2">
            <ng-template matTabContent>
              <child-component> </child-component>
                  </ng-template>
                           </mat-tab>
                   
                        <mat-tab-group>
             </ng-container>
fatima
  • 33
  • 1
  • 6

2 Answers2

2

Yes, if you look at the api here: https://material.angular.io/components/tabs/api you'll see for mat-tab-group there's a selectedIndex input:

<mat-tab-group mat-align-tabs="start" [selectedIndex]="selectedIndex">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

In your class set the selectedIndex to whichever one you want the default to be, or after your data is initialized.

Mathew Berg
  • 28,625
  • 11
  • 69
  • 90
  • 1
    I’m actually trying to use labels instead. I pass them through routes and then try to get the index for that label. So looking for the right place and way to do that. I tried to use veiwChild for mat tab and on viewChild set i tried to get the index for that label and set it as selectedIndex but didnt work – fatima Jan 13 '22 at 03:59
  • Please include some code then, I'm not sure what you're trying to accomplish. – Mathew Berg Jan 13 '22 at 04:02
  • I've just added an example on the question, please check it – fatima Jan 13 '22 at 04:21
0

So I was wanting to do this as well and there doesn't seem like there is a documented way that I've found, but this is a bit of a hacky way that seems to be working for me.

goToTabByLabel(label: string) {
  if (this.tabsgroup) {
    const tabs = (this.tabsgroup?._tabs as any)._results,
          match = tabs?.find(x => x.textLabel?.toUpperCase() === label.toUpperCase());

    if (match) {
      this.tabsgroup.selectedIndex = match.position;
    }
  }
}

So it looks like _results is private, maybe _tabs as well, but I got away with forcing the type to any to ignore the typechecking and got these results. When doing it this way I also needed to wait a second even longer after the view inits to get all the tab info correctly.

ngAfterViewInit() {
  const queryTab = this.route.snapshot.queryParamMap.get('tab');

  setTimeout(() => {
    if (queryTab)
      this.goToTabByLabel(queryTab);
  }, 1000);
}

Now you can use query params on the URL url.com?tab=Label

Tri42
  • 31
  • 6