12 Angular Material Mat tabs in 2 rows how can I achieve it?

Question

`<mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">

 <app-events></app-events>


  </mat-tab>
  <mat-tab label="Venues">

 <app-clubs></app-clubs>


    </mat-tab>




  <mat-tab label="Festivals">

 <app-events></app-events>

  </mat-tab>

  <mat-tab label="Concerts">

 <app-events></app-events>

  </mat-tab> 
    <mat-tab label="Restaurants">

 <app-events></app-events>
</mat-tab> 
<mat-tab label="Karaokes">

<app-events></app-events>

  </mat-tab> 
</mat-tab-group><mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">

 <app-events></app-events>


  </mat-tab>
  <mat-tab label="Venues">

 <app-clubs></app-clubs>


    </mat-tab>




  <mat-tab label="Festivals">

 <app-events></app-events>

  </mat-tab>

  <mat-tab label="Concerts">

 <app-events></app-events>

  </mat-tab> 
    <mat-tab label="Restaurants">

 <app-events></app-events>
</mat-tab> 
<mat-tab label="Karaokes">

<app-events></app-events>

  </mat-tab> 
</mat-tab-group>
`<mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">

 <app-events></app-events>


  </mat-tab>
  <mat-tab label="Venues">

 <app-clubs></app-clubs>


    </mat-tab>




  <mat-tab label="Festivals">

 <app-events></app-events>

  </mat-tab>

  <mat-tab label="Concerts">

 <app-events></app-events>

  </mat-tab> 
    <mat-tab label="Restaurants">

 <app-events></app-events>
</mat-tab> 
<mat-tab label="Karaokes">

<app-events></app-events>

  </mat-tab> 
</mat-tab-group><mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">

 <app-events></app-events>


  </mat-tab>
  <mat-tab label="Venues">

 <app-clubs></app-clubs>


    </mat-tab>




  <mat-tab label="Festivals">

 <app-events></app-events>

  </mat-tab>

  <mat-tab label="Concerts">

 <app-events></app-events>

  </mat-tab> 
    <mat-tab label="Restaurants">

 <app-events></app-events>
</mat-tab> 
<mat-tab label="Karaokes">

<app-events></app-events>

  </mat-tab> 
</mat-tab-group>

` Click here for image I am trying to use 12 mat tabs in 2 rows with angular material how can I achieve this with obviously one mat tab only selected?

The code provided is 12 separate tabs in 2 by collection of 6 each I am able to show it like that because the top selected tab is empty.

If inserted 12 in one container will give a slider wich I don't want

Answer 1

use only one mat-tab-group and add this to your mat-tab-group

disablePagination="true"

https://material.angular.io/components/tabs/api#MatTabGroup