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

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

<mat-tab-group> only reads the [selectedIndex] input when the component is first created. Afterwards the output binding (selectedIndex) lets you track tab changes.

I think you're setting the value 1 before that tab exists.

The problem is that *ngFor is creating the children mat-tab components afterwards. When <mat-tab-group> is notified that the children have changed it defaults to the first tab.

The only work-around that I know of is to trigger a change to the [selectedIndex] binding after the child <mat-tab> components have been created.

Update your component to have a property:

public selectedIndex: number = 0;

Use this as the binding for the selectedIndex input:

<mat-tab-group class="col-10 offset-1" 
               (selectedTabChange)="onTabChanged($event)" 
               [selectedIndex]="selectedIndex">

Inject these dependencies into your component:

  public constructor(private change: ChangeDetectorRef) {}

Update your subscribe to change the selected index after the *ngFor has finished updating the document.

this.api.getDataset(this.route.snapshot.params["experimentid"]).subscribe(res => {
    this.tabs = res;
    // wait for ngFor to finish
    window.setTimeout(()=>{
       this.selectedIndex = 1;
       this.change.markForCheck();
    });
});