Angular material mat-align-tabs properties are not getting properly aligned

Question

As mentioned in the angular material tabs documentation, I have this markup in my project:

<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>

My css class is as below:

.mat-tab-group {
    margin-bottom: 48px;
  }

But as the output I am getting all the above tab groups placed in same position as below. I want the tab group to get centralised.

My Angular version is 6. Any help?

Answer 1

adjusting mat-header horizontal position via material api is not possible as far as I know.

you can however, use ng-deep (yes deprecated but still works) and since its a flex item, you can simply align it to the center.

::ng-deep mat-tab-header {
  align-self: center;
}

stackblitz demo

Answer 2

I had very similar but not so trivial problem with div.mat-tab-links which are another notation of mat-tabs (by directives, but not the ) when [some-material-directive] not works with angle brackets and I wanted to set its values conditionally - so this comment was very helpful but need to inform that in this way you can conditionally and dynamically set what you want

<nav
  mat-tab-nav-bar
  [attr.mat-align-tabs]="(alignItToCenter$$|async) ? 'center' : 'left'" // <= mean this
>
  <a 
    *ngFor="let link of links"
    class="dashboard-menu"
    mat-tab-link
  >
    {{link.title}}
  </a>
</nav>

but of course, you can set it by CSS

::ng-deep .mat-tab-link-container {
    //
  .mat-tab-list {
    //
    .mat-tab-links {
      //
    }
  }
}

Answer 3

In the css file

mat-tab-header {
  align-self: right!important;
}

and in the ts file add:

@Component({
  selector: 'yourcomponent-component',
  templateUrl: './yourcomponent.component.html',
  styleUrls: ['./yourcomponent.component.scss'],
  encapsulation:ViewEncapsulation.None <---- add this
})

Here you wont have to worry about ::ng-deep being deprecated. And it works the same.