Making Material tabs scrollable

Question

I\'m using Material tabs in my application (mat-tab s inside mat-tab-group) When there are more tabs than can be displayed, two navigation buttons

Answer 1

Try this pure css solution StackBlitz

Put this code in the same component where mat-tab is used

::ng-deep .mat-tab-header {
  overflow-x: scroll !important;
}

::ng-deep .mat-tab-label-container { 
  overflow: visible !important;
}

::ng-deep .mat-tab-header::-webkit-scrollbar { // TO Remove horizontal scrollbar in tabs
  display: none;
}