Angular 13: Material Tabs with bodyClass not working

Question

I set according the Angular Doc the bodyClass in the following example:

 <mat-tab-group animationDuration="0ms" [selectedIndex]="selectedIndex">

    <mat-tab label="Documents">
      <ng-template matTabContent>
                  <app-container1></app-container1>
      </ng-template>
    </mat-tab>
    <mat-tab label="Documents2"  [bodyClass]="'tab-item-meta'">
              <app-ref-main1></app-ref-main1>
    </mat-tab>
  </mat-tab-group>

and have in the corresponding *.scss file:

.tab-item-meta {
    height: 70vh;
}

When I open the Developer Console (either in FF or Chromium) I see that the class tab-item-meta is applied. But there the values of the scss file are not applied. When I try to add a code like

<div class="tab-item-meta">test</div>

then I see i.e. the class is applied. It seems like this extra attribute _ngcontent-mgf-c556 is missing for the mat-tab-body.

==> How to use the bodyClass properly?

Answer 1

You should use the class mat-tab-body-content instead. I have just test it on Angular 13. You must set main container the height and in this case is the tab height and not directly to your div. bodyClass works as it should be but the problem is not it in this case.

  :host::ng-deep {
       .mat-tab-body-content {
           height: 70vh;
       }
  }

Answer 2

try this, it worked for me:

:host::ng-deep {
  .tab-item-meta {
     height: 70vh;
  }
}