two tabs vertical & horizontal - Not working Mat tabs

Question

I was able to create vertical material tab with my below code but I want is inside vertical tab i need an horizontal tab

When I tried using below code both showing in vertical tabs Here is my code and here is my Stackblitz url.

<div class="container">
      <div id="content">
        <div id="main-content">
          <mat-tab-group>
            <mat-tab label="Tab One">
              Tab One Content
            </mat-tab>
            <mat-tab label="Tab Two">
            <mat-tab-group>
            <mat-tab label="First"> Content 1 </mat-tab>
            <mat-tab label="Second"> Content 2 </mat-tab>
            <mat-tab label="Third"> Content 3 </mat-tab>
          </mat-tab-group>
            </mat-tab>
          </mat-tab-group>
        </div>
      </div>
    </div>

Here is the stackblitz link

score 2 · Accepted Answer · answered Feb 17 '20 at 21:20

You may achieve that by nesting mat-tab-group's, specifying classes for vertical and horizontal depending on the orientation and adjusting css accordingly:

HTML

<mat-tab-group class="vertical">
  <mat-tab label="Tab One">
    <mat-tab-group class="horizontal">
      <mat-tab label="Sub Tab One">
        Sub Tab One Content
      </mat-tab>
      <mat-tab label="Sub Tab Two">
        Sub Tab Two Content
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
  <mat-tab label="Tab Two">
    Tab Two Content
  </mat-tab>
</mat-tab-group>

CSS

  :host {
    /deep/ {
        .mat-tab-group.vertical {
            flex-direction: row;
        }
        .mat-tab-group.horizontal {
            flex-direction: column;
        }
        .vertical .mat-tab-labels {
            flex-direction: column;
        }
        .horizontal .mat-tab-labels {
            flex-direction: row;
        }
    }
}

Working stackblitz here

two tabs vertical & horizontal - Not working Mat tabs

1 Answers1