Show Angular Material Tabs in two (2) rows

Question

I am building a tabs component using Angular Material Tabs and as the number of tabs increase, it automatically starts scrolling horizontally. Instead of doing that, I want to break the tabs and show them in two (2) rows. How do I do this?

You can find the code here: StackBlitz

Please help me get this done.

Answer 1

By default .mat-tab-labels has display:flex if you want to show all tabs in two lines or more you can use display: block.

So you can solve this problem by css like this:

::ng-deep .mat-tab-labels {
  /* display: flex; */ default display is flex change to block
  display: block !important;
}

ForkedStackblitz

And the result: