0

I am trying to display data on each and every tab, but the issue is the data I have is relatably large to fit in a single screen.

I am looking for a way to make tabs scrollable so that I can scroll on the data.

Is there any way to add buttons on the edges of the tabs or add a horizontal scrollbar to make it scrollable?

Something like this, which is responsive too.

enter image description here

Thanks

abhigyan nayak
  • 1,394
  • 6
  • 25
  • 35

1 Answers1

1

You can solve it through Angular material Tabs. Here, is the documentation of angular.

https://material.angular.io/components/tabs/examples

Remember, you have to import MatTabModule on your angular module, like below:

enter image description here

I have added it on my project and a sample image is like below:

I have hidden text here

Additionally, if you want to add a button instead of text, you can do it also. Here is a sample image for you:

Sample image with mat-icon button

Here, sample code for this is

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      First
    </ng-template>
    Content 1
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Second
    </ng-template>
    Content 2
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Third
    </ng-template>

    Content 3
  </mat-tab>
</mat-tab-group>

You can use any mat-icon class here to change the button icon. You can use this link https://material.io/resources/icons/?style=baseline .

Hopefully, it will solve your problem.

Abdus Salam Azad
  • 5,087
  • 46
  • 35
  • This helps.. I read the documentation before. But was not able to find that it would automatically add buttons as it overflows. Please add an example code of overflowing tabs.. it would help others better.. Thanks :) – abhigyan nayak May 08 '20 at 02:35
  • Also.. it would be great. if you can help me witht this as well .. https://stackoverflow.com/questions/61657697/scrollable-angular-material-stepper – abhigyan nayak May 08 '20 at 02:39