How can I access the Template References of my ViewChildren?

Question

Consider these material tabs in my template:

<mat-tab #myFirstTab>Something</mat-tab>
<mat-tab #mySecondTab>Something else</mat-tab>

And the ViewChildren in the.ts file:

  @ViewChildren(MatTab)
  private allTabs: QueryList<MatTab>;

  public ngAfterViewInit() {
    this.allTabs.forEach(tab => console.log('tab: ', tab));
  }

How can I access the actual template references of each tab (#myFirstTab and #mySecondTab) in my.ts code? Is it possible at all this way around? I need a way to differentiate my tabs , and the label text is not good because it can vary...

Edit: I specifically asked for @ViewChildren and not @ViewChild. Of course I know the other way around. In this case, I do not want to have to declare each Viewchild in my.ts file .

Answer 1

ViewChild directive ? eg

@ViewChild('myFirstTab') myFirstTab: MatTab;
@ViewChild('mySecondTab') mySecondTab: MatTab;