如何使用 angular 材料标签在 angular 中获取标签并将其设置为默认值

Question

I have a component inside another big component (parent). The big component has the tabs feature and to access those tabs inside the inner component im doing the following:

document.querySelectorAll('.mat-tab-group');

That above code outputs me an array of length 2 because there is another tab. So to access the last one and set the default tab im doing the following:

const tabs = document.querySelectorAll('.mat-tab-group');
if (tabs.length > 0) {
    tabs[tabs.length - 1]['selectedIndex'] = 3;
} 

But that does nothing. I appreciate any help. Thank you.

Note : I cant touch parent component. Only the inner one.

Answer 1

Look at the official documentation: https://material.angular.io/components/tabs/overview
Here it says there is an attribute called "selectedIndex" which determines which tab should be chosen. You dont need no querySelector or any javascript related stuff. Here is an example on how to dynmically change the tab just by the selectedIndex value: https://stackblitz.com/angular/xamqklmnbkkj?file=src%2Fapp%2Ftab-group-dynamic-example.ts
Hope it helps!