diff --git a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.css b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.css
index d0f47895f9f9..f19c1c45e824 100644
--- a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.css
+++ b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.css
@@ -1,3 +1,9 @@
 .mat-tab-group {
   margin-bottom: 48px;
 }
+
+.example-action-button {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 8px;
+}
diff --git a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html
index b19d4f4e165f..6b2f8633803b 100644
--- a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html
+++ b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html
@@ -1,19 +1,19 @@
-<!-- #docregion align-start -->
-<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
-<!-- #enddocregion align-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>
+<button mat-raised-button class="example-action-button" (click)="alignment = 'start'">
+  Start
+</button>
 
-<mat-tab-group mat-stretch-tabs="false" 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>
+<button mat-raised-button class="example-action-button" (click)="alignment = 'center'">
+  Center
+</button>
 
-<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="end">
+<button mat-raised-button class="example-action-button" (click)="alignment = 'end'">
+  End
+</button>
+
+<!-- #docregion align-start -->
+<mat-tab-group mat-stretch-tabs="false" [mat-align-tabs]="alignment">
   <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>
+<!-- #docregion align-end -->
\ No newline at end of file
diff --git a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts
index 510b6f95740b..ed8b032845e7 100644
--- a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts
+++ b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatTabsModule} from '@angular/material/tabs';
 
 /**
@@ -8,6 +9,8 @@ import {MatTabsModule} from '@angular/material/tabs';
   selector: 'tab-group-align-example',
   templateUrl: 'tab-group-align-example.html',
   styleUrl: 'tab-group-align-example.css',
-  imports: [MatTabsModule],
+  imports: [MatTabsModule, MatButtonModule],
 })
-export class TabGroupAlignExample {}
+export class TabGroupAlignExample {
+  alignment: 'start' | 'center' | 'end' = 'start';
+}
diff --git a/src/material/tabs/tabs.md b/src/material/tabs/tabs.md
index ff098e32d4c8..28d41f6dc414 100644
--- a/src/material/tabs/tabs.md
+++ b/src/material/tabs/tabs.md
@@ -70,7 +70,7 @@ with the `matTabContent` attribute.
 
 ### Label alignment
 If you want to align the tab labels in the center or towards the end of the container, you can
-do so using the `[mat-align-tabs]` attribute.
+do so using the `mat-align-tabs` input or attribute.
 
  <!-- example({"example": "tab-group-align",
                "file": "tab-group-align-example.html",