Mat-tab material angular6 selectedIndex doesn't work with *ngFor

Question

I display several tabs with a loop ngFor using Angular Material tabs. This works properly however now I would like to open the second tab when initialised and not the first tab. Therefore, I add the property selectedIndex in the mat-tab-group but it doesn't work and still continues to open on the first tab.

HTML

<mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)" [selectedIndex]="1">
  <mat-tab label={{tab.name}} *ngFor="let tab of tabs; let index = index">
    <div>
      Values: {{tab.values}}
    </div>
  </mat-tab>
</mat-tab-group>

The variable "tabs" is fetched with a service from the server in ngOnInit like this:

COMPONENT

this.api.getDataset(this.route.snapshot.params["experimentid"]).subscribe(
  res => {
    this.tabs = res;
  },
  err => {
    console.log(err);
  }
);

I think it comes from here because if I set the tabs manually without requesting to the server it works. Like this:

this.tabs = [{name: "X2", values: "52"}, {name: "Z2", values: "52"}, {name: "R2", values: "52"}]

Answer 1

You can set the selectedIndex after your service data is available. You need to do below changes:

1. Get hold of a reference to MatTabGroup instance in your component (the component whose template contains mat-tab-group) by declaring below attribute:

   @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
   

2. Then set the selectedIndex in subscribe method call while updating new value for tabs

   .subscribe(
     res => {
       this.tabs = res;
       this.tabGroup.selectedIndex = 1;
     },
   

Overall, you component may look somewhat like below:

import {Component, OnInit, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material';

@Component({
  selector: 'tab-group-basic-example',
  templateUrl: 'tab-group-basic-example.html',
  styleUrls: ['tab-group-basic-example.css'],
})
export class TabGroupBasicExample implements OnInit {

  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;

  tabs = [];

  ngOnInit() {
    this.api.getDataset(experimentId).subscribe(
      res => {
          this.tabs = res;
          this.tabGroup.selectedIndex = 1;
      },
      err => {
          console.log(err);
      }
    );
  }
}