i have a basic mat-tab-group with 2 mat-tab nested inside it. Both mat-tab have a [hidden] input attribute, determined by a boolean value that changes in my code. It is working like a charm for the mat-tab themselves, meaning that when the [hidden] inputed expression value is false, tabs are not displayed.
Problem is, mat-tab-header is still visible, and leads to the possibility of clicking and go to an empty tab.
Is there any solution that can bind associated mat-tab-header visibility with his related mat-tab?
I Cannot use ngIf because i do need the tabs to be present on the DOM for data processing and lifecycles reasons.
Generic situation :
<mat-tab-group>
<mat-tab [hidden]="isFirstTabHidden" [label]="tab1">
{{1st Tab}}
</mat-tab>
<mat-tab [hidden]="isSecondTabHidden"
[label]="tab2">
{{Second Tab}}
</mat-tab>
</mat-tab-group>