How to align mat-tab-group label to left

3
votes

I'm using angular material in my development I want to left align my tab labels.

<mat-tab-group >
  <mat-tab label="Heading 1"> Content 1 </mat-tab>
  <mat-tab label="Heading 2"> Content 2 </mat-tab>
  <mat-tab label="Heading 3"> Content 3 </mat-tab>
</mat-tab-group>

I'm expecting to see the text Heading 1, Heading 2 and Heading 3 as left aligned. Is there a way to achieve this?

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

2
sassangular-materialangular6

2 Answers

5
votes

In theory I wouldn't mess with the Angular Material styles too much, but if you really need to have your labels aligned to the left you can do the following (in your component stylesheet):

::ng-deep .mat-tab-label {
  padding: 0px !important; // adjust this to whatever padding you need
  justify-content: left !important;
}

Here is a stackblitz showing it in action.

1
votes

As of AUG 2020 you can use built-in property called mat-align-tabs

<mat-tab-group mat-align-tabs="start">
  <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-group mat-align-tabs="center">
  <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-group mat-align-tabs="end">
  <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>