[Tabs] Get label property of selected tab

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

To programmatically get the name of the currently selected tab

What is the current behavior?

It seems that (selectedTabChange) and md-on-select aren’t executing the ts code for some reason. Even if they did, they would only return the current index #. I need the full value of the label property for what I’m working with.

What are the steps to reproduce?

<md-tab-group (selectedTabChange)="tabChanged($event)" style="margin-top:16px;">
      <md-tab label="{{ thing.name }}" *ngFor="let thing of things | async">

        <div class="ui basic segment">
          <table class="ui three column center aligned table">
            <thead>
              <tr>
                <th><div class="ui pink button">Item 1</div></th>
                <th><div class="ui pink button">Item 2</div></th>
                <th><button class="ui red button"><i class="pin icon"></i>Pinned</button></th>    
              </tr>
            </thead>
          </table>
        </div>

      </md-tab>
      <md-tab label="+ Add Thing"></md-tab>
    </md-tab-group>

What is the use-case or motivation for changing an existing behavior?

In this example, I would add an item to the tabs list. Then when clicked, I would find the value of the selected tab’s label property to see which tab is selected and therefore which information to load from my Firestore database. The path in my database that I need to load is given the same value as the label property of the tab, which makes it much easier to work with.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

AngularFire2 v5 Angular Common v4.2.4 Material v2.0.0 beta.10 Typescript v2.3.3

Is there anything else we should know?

Platypus are from the same family as Echidnas.

[FiringBlanks]

The selectedTabChange property only fires when a tab is changed. That’s good, but Is there a way of getting the name of the tab that is set when the mat-tab-group is first initialized?

I tried setting @ViewChild('tabGroup') tabGroup and running the ngAfterViewInit() function below but that only gets me the index of the tab set on initialization (which is always 0). I need the actual label again.

ngAfterViewInit() {
    console.log('afterViewInit => ', this.tabGroup.selectedIndex); 
  }

[ATakaSKY]

@FiringBlanks Found the solution. You can do: this.tabGroup._tabs.first.textLabel on the tabGroup instance from ViewChild.