0

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:

Screenshot

I can't find nativeElement.

Do I have to use document.getElementByID?

fatihyildizhan
  • 8,614
  • 7
  • 64
  • 88
sally
  • 379
  • 2
  • 8
  • 17

1 Answers1

0

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.

hoangbh1104126
  • 164
  • 1
  • 10