CODEWITHSUNDEEP
htmlangulartypescriptangular-materialmat-tab
RR1000
RR1000

Reputation: 43

Angular material : How to hide mat-tab-header when mat-tab is hidden?

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>

Upvotes: 1

Views: 1106

Answers (0)

Related Questions