Index not selected on populating dynamic layout tab panel

[sanjaybhaskar]

Here i'm populating the mdl-layout-tab-panel dynamically from the api data, after binding the data the mdl-layout-tab-active-index="0" doesn't seems to be applied. here my code

I'm not sure this is a bug in the panel. please help me if there is any way to get the tabs selected.

<div *ngIf="ObjList">
	<mdl-layout mdl-layout-fixed-header  mdl-layout-header-seamed mdl-ripple mdl-layout-tab-active-index="0">
        <mdl-layout-header>
			<header-component [Title]="HeaderTitle"></header-component>
        </mdl-layout-header>
          <mdl-layout-content>
			<mdl-layout-tab-panel *ngFor="let r of ObjList"  mdl-layout-tab-panel-title="{{r.Name}}">
				<div style="height: 100%; width: 100%; position: absolute">
					<!-- Some binding of object "r.Details" -->
				</div>
                  </mdl-layout-tab-panel>
             </mdl-layout-content>
	</mdl-layout>
</div>

@Component({
  selector: 'list',
  styleUrls: [ './list.component.scss' ],
  templateUrl: './list.component.html'
})
export class ListComponent implements OnInit {        
        ObjList: DataContract[] = [];        
        HeaderTitle: string = "Some header";        
		constructor(public dataservice: DataService){  
		}
public ngOnInit(){
      this.dataservice.getData(this.dataservice.Id).subscribe
      (        
        res =>{              
				res.forEach(e => {
				var localObj = new DataContract;
				localObj.Id = e.TRCName
				localObj.Name = e.TRCName;     
				localObj.Details = e.Details;
              this.ObjList.push(localObj);
           });          
		}
    );
  }
}