docs(material/tabs): add dynamically aligned tabs group example

adds an example for dynamically aligned tabs group

closes #29029

Author: naaajii

src/components-examples/material/tabs/index.ts

@@ -1,4 +1,5 @@
 export {TabGroupAlignExample} from './tab-group-align/tab-group-align-example';
+export {TabGroupDynamicAlignExample} from './tab-group-dynamic-align/tab-group-dynamic-align-example';
 export {TabGroupAnimationsExample} from './tab-group-animations/tab-group-animations-example';
 export {TabGroupAsyncExample} from './tab-group-async/tab-group-async-example';
 export {TabGroupBasicExample} from './tab-group-basic/tab-group-basic-example';

src/components-examples/material/tabs/tab-group-dynamic-align/tab-group-dynamic-align-example.css

@@ -0,0 +1,5 @@
+.example-action-button {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 8px;
+}

src/components-examples/material/tabs/tab-group-dynamic-align/tab-group-dynamic-align-example.html

@@ -0,0 +1,19 @@
+<button mat-raised-button class="example-action-button" (click)="alignment = 'start'">
+  Start
+</button>
+
+<button mat-raised-button class="example-action-button" (click)="alignment = 'center'">
+  Center
+</button>
+
+<button mat-raised-button class="example-action-button" (click)="alignment = 'end'">
+  End
+</button>
+
+<!-- #docregion dynamic-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 dynamic-align-end -->

src/components-examples/material/tabs/tab-group-dynamic-align/tab-group-dynamic-align-example.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTabsModule} from '@angular/material/tabs';
+
+/**
+ * @title Tab group with dynamically aligned labels
+ */
+@Component({
+  selector: 'tab-group-dynamic-align-example',
+  templateUrl: 'tab-group-dynamic-align-example.html',
+  styleUrl: 'tab-group-dynamic-align-example.css',
+  standalone: true,
+  imports: [MatTabsModule, MatButtonModule],
+})
+export class TabGroupDynamicAlignExample {
+  alignment: 'start' | 'center' | 'end' = 'start';
+}

src/dev-app/tabs/tabs-demo.html

@@ -1,5 +1,7 @@
 <h3>Tab group alignment</h3>
 <tab-group-align-example></tab-group-align-example>
+<h3>Tab group dynamic alignment</h3>
+<tab-group-dynamic-align-example></tab-group-dynamic-align-example>
 <h3>Tab group animations</h3>
 <tab-group-animations-example></tab-group-animations-example>
 <h3>Tab group async</h3>
@@ -25,4 +27,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>

src/dev-app/tabs/tabs-demo.ts

@@ -21,6 +21,7 @@ import {
   TabGroupPaginatedExample,
   TabGroupStretchedExample,
   TabNavBarBasicExample,
+  TabGroupDynamicAlignExample,
 } from '@angular/components-examples/material/tabs';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatTabsModule} from '@angular/material/tabs';
@@ -44,6 +45,7 @@ import {MatTabsModule} from '@angular/material/tabs';
     TabGroupBasicExample,
     TabGroupCustomLabelExample,
     TabGroupDynamicHeightExample,
+    TabGroupDynamicAlignExample,
     MatTabsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

src/material/tabs/tabs.md

@@ -76,6 +76,12 @@ do so using the `[mat-align-tabs]` attribute.
                "file": "tab-group-align-example.html",
                "region": "align-start"}) -->
 
+Alternatively you can also use `[mat-align-tabs]` input which takes either `start`, `center` or `end`.
+
+<!-- example({"example": "tab-group-dynamic-align",
+               "file": "tab-group-dynamic-align-example.html",
+               "region": "dynamic-align-start"}) -->
+
 ### Controlling the tab animation
 You can control the duration of the tabs' animation using the `animationDuration` input. If you
 want to disable the animation completely, you can do so by setting the properties to `0ms`. The