Angular2 material access tab outside it

Question

I have the following code:

    <md-tab-group>
          <md-tab *ngFor="let section of sectionList">
        <template md-tab-label>
<span (click)="selectedSection=section">
           {{section.name}}
</span>
         </template>
        </md-tab>
        </md-tab-group>

How I can show the data of the current selected section (the section object) outside the tab loop?

I tried to add a span with (click) but it couldn't trigger.

Answer 1

The tab group has a selectedIndex property so you can create a template reference for it and then use that.

<md-tab-group #tabGroup>
 <md-tab *ngFor="let section of sectionList">
  <template md-tab-label>
    <span (click)="selectedSection=section">
       {{section.name}}
    </span>
  </template>
 </md-tab>
</md-tab-group>
<div>{{sectionList[tabGroup.selectedIndex].name}}</div>