title: Angular Material - Know exactly which tab was selected
body: <p>So I might have missed something obvious in the docs, but I'm simply looking for an easy way to find which tab has been selected in the following scenario:</p>
  
  <h2>View</h2>
  
  <pre><code>&lt;mat-tab-group (selectedTabChange)="onTabChange($event)"&gt;
    &lt;mat-tab *ngIf="true" label="Label1"&gt;Content 1&lt;/mat-tab&gt;
    &lt;mat-tab *ngIf="false" label="Label2"&gt;Content 2&lt;/mat-tab&gt;
    &lt;mat-tab *ngIf="true" label="Label3"&gt;Content 3&lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>Obviously, the conditions are dynamic in my actual code. This is just for the sample.</p>
  
  <h2>Script</h2>
  
  <pre><code>onTabChange(event: MatTabChangeEvent) {
    // ?
  }
  </code></pre>
  
  <h2>Issue</h2>
  
  <p>In the above script, <code>event.index</code> will return 0 if I click the first tab, and <strong>1 if I click the third tab</strong>, because the second one isn't displayed due to <code>*ngIf</code>. </p>
  
  <p>This does make sense to me, however it's making it really hard to know <strong>which tab was actually clicked</strong> depending on which ones were displayed to begin with.</p>
  
  <p>I could either:</p>
  
  <ul>
  <li>test again for every tab condition within <code>onTabChange</code> to figure out which index corresponds to which tab,</li>
  <li>(probably) bind a <code>ViewChild(ren)</code> reference to something and retrieve data (such as <code>data-</code> attributes) through their native DOM elements.</li>
  </ul>
  
  <p>Both these options seem super overkill though.</p>
  
  <h2>Question</h2>
  
  <p>In the above code, what would be the appropriate way to know that, say, the tab labelled <code>Label3</code> was clicked, without testing for the label itself (which would obviously be horrendous)?</p>
  
  <p><a href="https://stackblitz.com/edit/angular-uajlrc?file=app%2Ftab-group-basic-example.html" rel="nofollow noreferrer">Simple Stackblitz</a> if that can help.</p>