From c98e84c30f5c805003cab1c1df12822f6cbe00f2 Mon Sep 17 00:00:00 2001
From: naaajii <vcmpbhai@gmail.com>
Date: Sat, 28 Sep 2024 01:02:54 +0500
Subject: [PATCH] docs(material/tabs): add dynamically aligned tabs group
 example

adds an example for dynamically aligned tabs group

closes #29029
---
 .../tab-group-align-example.css               |  6 +++--
 .../tab-group-align-example.html              | 26 +++++++++----------
 .../tab-group-align-example.ts                |  7 +++--
 src/dev-app/tabs/tabs-demo.html               |  2 +-
 src/material/tabs/tabs.md                     |  2 +-
 5 files changed, 24 insertions(+), 19 deletions(-)

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..b388e4be7723 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,5 @@
-.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 daad5e594721..7b884aafe705 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';
 
 /**
@@ -9,6 +10,8 @@ import {MatTabsModule} from '@angular/material/tabs';
   templateUrl: 'tab-group-align-example.html',
   styleUrl: 'tab-group-align-example.css',
   standalone: true,
-  imports: [MatTabsModule],
+  imports: [MatTabsModule, MatButtonModule],
 })
-export class TabGroupAlignExample {}
+export class TabGroupAlignExample {
+  alignment: 'start' | 'center' | 'end' = 'start';
+}
diff --git a/src/dev-app/tabs/tabs-demo.html b/src/dev-app/tabs/tabs-demo.html
index 20aed4baf36b..d30c30f323d3 100644
--- a/src/dev-app/tabs/tabs-demo.html
+++ b/src/dev-app/tabs/tabs-demo.html
@@ -25,4 +25,4 @@ <h3>Inverted Tabs</h3>
 <h3>Ink bar fit to content</h3>
 <tab-group-ink-bar-example></tab-group-ink-bar-example>
 <h3>Tab group with the headers on the bottom</h3>
-<tab-group-header-below-example></tab-group-header-below-example>
+<tab-group-header-below-example></tab-group-header-below-example>
\ No newline at end of file
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",