How to get mat-tab element by id in angular 6?

Question

I am trying to get a mat-tab element with its id, but for some reason the command document.getElementById() returns null and not the mat-tab element. Example:

https://stackblitz.com/edit/angular-mn5tt6

Can someone say why is this happening, and is there some better, correct way of getting the HTML-element?

Big thanks for help!

My answer

The best way that I found to get the tab HTML-element, was the following

HTML-file:

<mat-tab-group #tabGroup>
  <mat-tab label="First"> Content 1
     <button (click)="printTab(tabGroup)">click me</button>
 </mat-tab>
 <mat-tab label="Second"> Content 2 </mat-tab>
 <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

TS-file:

export class TabGroupBasicExample {

   @ViewChild('tabGroup') tabGroup;

   printTab(tabGroup) {
      console.log(this.tabGroup._tabs._results[0]);
   }
}

Stackblitz:

https://stackblitz.com/edit/angular-mn5tt6-ahxi4j?file=app%2Ftab-group-basic-example.ts

Answer 1

In

<mat-tab-group>
  <mat-tab label="First" id="tab1"> Content 1
    <button (click)="printTab()">click me</button>
     </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

The components change the HTML structure so there is no more the id in the generated HTML

If you want to find a HTMLElement you can use mat-tab-label-0-0 for the label or mat-tab-content-0-0 for the content.

But usually with angular you don't need to get your html element