selectedIndex not working in md-tab-group when dynamically generating tabs

Question

I am trying to set selectedIndex Property of md-tab-group in material for angular 2 so that I can get animated ink bar below first tab. It worked when tabs were statically defined

<md-tab-group>
    <md-tab label="Tab 1">Content 1</md-tab>
    <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

But when I am generating md-tabs dynamically using *ngFor, its not working.

<md-tab-group selectedIndex= 0 class="inner-tab">
        <md-tab *ngFor="let rule of ruleList">
            <ng-template md-tab-label>{{getOutputTabTitle(rule)}}</ng-template>
            <view-plan-validations [validatorsList]="rule.ruleOutputList"></view-plan-validations>
        </md-tab>
    </md-tab-group>

Any suggestions what is happening wrong here?

Answer 1

Try with data binding as well as putting quotes around the index number.

[selectedIndex]="0"

I tested it in this plunker, and it's working.

<md-tab-group [selectedIndex]="2">
  <md-tab *ngFor="let tab of tabs">
    <ng-template md-tab-label>
      {{ tab.label }}
    </ng-template>
    <h1>{{ tab.body }}</h1>
  </md-tab>
</md-tab-group>