How to get mat tab width?

I am trying to get the width of the tab.

And I expect to get like nativeElement.clientWidth

If I use ViewChild like:

@ViewChild('matTab', {static: false}) matTab: ElementRef;
    
<mat-tab label="Overview" #matTab>Overview</mat-tab>

But I try to read matTab by console.log(this.matTab)

It shows:

I can't find nativeElement.

Do I have to use document.getElementByID?

You cannot get the width of tab by using mat-tab element because <mat-tab> is not showing in DOM. You can use Chrome DevTools and see they are using only <mat-tab-header> and <mat-tab-content> inside the mat-tab-group.

You should get the width of tab-group instead of only single tab:

<mat-tab-group #matTab>
    <mat-tab label="Overview">Overview</mat-tab>
    ...
</mat-tab-group>

You also need to add read: ElementRef:

If you want to get a reference of an element that hosts a component or directive you need to specify that you want the element instead of the component or directive

-- Günter Zöchbauer

@ViewChild('matTab', { read: ElementRef, static:false }) matTab: ElementRef;

Now the new mat-tab have nativeElement attribute.