title: Angular Material 2 - Get Label of First Tab
body: <p>I need to get the value of whatever tab the user clicks on. Here's what I have so far: </p>
  
  <pre><code>&lt;mat-tab-group (selectedTabChange)="getLabel($event)" #tabGroup&gt;
      &lt;mat-tab label="{{ thing.name }}" *ngFor="let thing of things | async" #tab&gt;
          ....
      &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p><strong>TS - Database Fetch:</strong></p>
  
  <pre><code>thingsCollection: AngularFirestoreCollection&lt;Intf&gt;;
  things: Observable&lt;Intf[]&gt;;
  
  ngOnInit() {
      this.thingsCollection = this.afs.collection(placeToSearch2);
      this.things = this.thingsCollection.valueChanges();
  }
  </code></pre>
  
  <p>The issue is that I also need the value of the <code>label</code> property of the tab that the <code>mat-tab-group</code> first loads. <code>(selectedTabChange)</code> only fires when the user manually <em>clicks</em> on a tab. That's good, but doesn't give me the label of the <em>first</em> tab. </p>
  
  <p>There was a similar question <a href="https://stackoverflow.com/questions/41653180/how-to-get-the-active-tab-in-angular-material2">here</a> with a good answer, but the commenter seemed to ghost on me when I asked him my particular question more clearly. The answer that he provided was close to what I need: </p>
  
  <pre><code>ngAfterViewInit() {
      console.log('afterViewInit =&gt; ', this.tabGroup.selectedIndex); // Close, but no cigar
    }
  </code></pre>
  
  <p>The above solution only gives me the index (which is almost always 0), not the <code>label</code>. How can I get the label? The Angular <a href="https://material.angular.io/components/tabs/api" rel="nofollow noreferrer">Tab reference</a> shows there is a textLabel property. I think this might be the answer, but it uses @Input which I'm not familiar with. Can someone please help me use it?</p>