angular material - How to align Tabs

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to align Tabs
</h2>


<mat-tab-group mat-align-tabs="start">
    <mat-tab label="Tab A">First tab content</mat-tab>
    <mat-tab label="Tab B">Second tab content</mat-tab>
    <mat-tab label="Tab C">Third tab content</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="center">
    <mat-tab label="Tab A">First tab content</mat-tab>
    <mat-tab label="Tab B">Second tab content</mat-tab>
    <mat-tab label="Tab C">Third tab content</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="end">
    <mat-tab label="Tab A">First tab content</mat-tab>
    <mat-tab label="Tab B">Second tab content</mat-tab>
    <mat-tab label="Tab C">Third tab content</mat-tab>
</mat-tab-group>

app.module.ts [import]

import { MatTabsModule } from '@angular/material/tabs'

More Angular tutorials

• angular - How to use clearInterval()
• angular material - Show custom color in Progress bar
• angular material - How to change Divider width
• angular material - How to change Divider thickness
• angular material - How to use indeterminate Progress spinner
• angular - How to use setTimeout()
• angular material - How to change Progress spinner color
• angular material - How to center Progress spinner
• angular material - How to disable Tabs content animation
• angular material - How to slow Tabs content transition
• angular material - How to get Tabs selected index
• angular material - How to use Tabs selectedTabChange event
• angular material - How to delete Tab programmatically
• angular material - How to show remove button on Tab label
• angular material - How to show Tab label bottom of content