How to programmatically grab mat-tab-group's selected Index

Question

I have a mat-tab-group with two mat-tabs. When the user clicks submit, I'm trying to figure out which tab is selected. How do I do that?

In my submit method, I want to grab the correct tab so I know which input field to read from. I tried following Programmatically select mat-tab in Angular 2 material using mat-tab-group but this question is asking something different and I couldn't figure out how to adapt the question to mine.

<mat-tab-group mat-align-tabs="center">
      <mat-tab label="Pre-selected Options">
        <mat-card-content>
          <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px" class="fnol-min-widht50">
            <div style="  width: 40%;">
              <div *ngIf="!hidden" [ngClass]="[routeAnimationsElements,'add-marging-bottom40']">
                <mat-form-field>
                  <mat-select placeholder="Vested Options" formControlName="vestedoptions" [id]="vestedoptions" mask="" thousandSeparator="">
                    <mat-option selected></mat-option>
                    <mat-option [value]="1">
                      A MARRIED MAN, AS HIS SOLE AND SEPARATE PROPERTY
                    </mat-option>
                    <mat-option [value]="2">
                      A MARRIED WOMAN AND A MARRIED MAN
                    </mat-option>
                    <mat-option [value]="3">
                      A MARRIED WOMAN, AS HER SOLE AND SEPARATE PROPERTY
                    </mat-option>
                    <mat-option [value]="4">
                      A MARRIED WOMAN/MAN AS HER/HIS SOLE AND SEP PROP
                    </mat-option>
                    <mat-option [value]="5">
                      A SINGLE MAN
                    </mat-option>
                    <mat-option [value]="6">
                      A SINGLE MAN AND A SINGLE WOMAN AS JOINT TENANTS
                    </mat-option>
                    <mat-option [value]="7">
                      A SINGLE PERSON
                    </mat-option>
                    <mat-option [value]="8">
                      A SINGLE WOMAN
                    </mat-option>
                    <mat-option [value]="9">
                      A WIDOW
                    </mat-option>
                    <mat-option [value]="10">
                      A WIDOWER
                    </mat-option>
                    <mat-option [value]="11">
                      AN UNMARRIED MAN
                    </mat-option>
                    <mat-option [value]="12">
                      AN UNMARRIED WOMAN
                    </mat-option>
                    <mat-option [value]="13">
                      HUSBAND && WIFE AS COM PROP WITH RIGHT OF SURVIVOR
                    </mat-option>
                    <mat-option [value]="14">
                      HUSBAND AND WIFE AS JOINT TENANTS
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </div>
          </div>
        </mat-card-content>
      </mat-tab>
      <mat-tab label="Pre-selected Options">
        <mat-card-content>
          <div [ngClass]="[routeAnimationsElements,'add-marging-bottom40']">
            <mat-form-field>
              <input matInput #input class="uppercase" placeholder="Free Text" formControlName="freetext">
              <mat-error *ngIf="!isFreeTextValid">{{this.freeTextErrorMessage}}</mat-error>
            </mat-form-field>
          </div>
        </mat-card-content>
      </mat-tab>
    </mat-tab-group>

Answer 1

You have different options for that the MatTabGroup has two events selectedIndexChange and selectedTabChange that will fire every time the tab is changed so you can remember the current tab or tab index. Then you know it once you submit.

Here is a simple example for this case:

<mat-tab-group mat-align-tabs="center" (selectedIndexChange)="onSelectedIndexChange($event)" (selectedTabChange)="onSelectedTabChange($event)">
    <mat-tab label="Pre-selected Options 1">
      
    </mat-tab>
    <mat-tab label="Pre-selected Options 2">
      
    </mat-tab>
</mat-tab-group>
<button (click)="onSubmit()">Submit</button>

And the code:

export class AppComponent  {
  private currentTabIndex = 0;

  public onSelectedIndexChange(tabIndex: number) {
    this.currentTabIndex = tabIndex;
    console.log(`Selected Tab Index: ${tabIndex}`);
  }

  public onSelectedTabChange(matTabChangeEvent: MatTabChangeEvent)  {
    console.log(matTabChangeEvent.tab.textLabel);
  }

  public onSubmit() {
    console.log(this.currentTabIndex);
  }
}

Another option is to just get the mat group directly using ViewChild and then just read the index from it on submit. Here is the code for this sample the template can be the same just without the events.

export class AppComponent  {
  @ViewChild(MatTabGroup) matTabGroup: MatTabGroup;

  public onSubmit() {
    console.log(this.matTabGroup.selectedIndex);
  }
}

Here is also a link to a StackBlitz that includes both implementations.