docs: convert Stepper/Tabs/Timepicker example to signals

src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html

@@ -1,10 +1,10 @@
-<button matButton="elevated" (click)="isEditable = !isEditable">
-  {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}
+<button matButton="elevated" (click)="isEditable.set(!isEditable())">
+  {{!isEditable() ? 'Enable edit mode' : 'Disable edit mode'}}
 </button>
 
 <mat-stepper linear #stepper>
 <!-- #docregion editable -->
-  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
+  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable()">
 <!-- #enddocregion editable -->
     <form [formGroup]="firstFormGroup">
 <!-- #docregion step-label -->
@@ -19,7 +19,7 @@
       </div>
     </form>
   </mat-step>
-  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
+  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable()">
     <form [formGroup]="secondFormGroup">
       <ng-template matStepLabel>Fill out your address</ng-template>
       <mat-form-field>

src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -30,5 +30,6 @@ export class StepperEditableExample {
   secondFormGroup = this._formBuilder.group({
     secondCtrl: ['', Validators.required],
   });
-  isEditable = false;
+
+  isEditable = signal(false);
 }

src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts

@@ -1,4 +1,4 @@
-import {Component, Service, inject} from '@angular/core';
+import {Component, Service, inject, signal} from '@angular/core';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatStepperIntl, MatStepperModule} from '@angular/material/stepper';
 import {MatButtonModule} from '@angular/material/button';
@@ -34,7 +34,7 @@ export class StepperIntlExample {
   private _formBuilder = inject(FormBuilder);
   private _matStepperIntl = inject(MatStepperIntl);
 
-  optionalLabelText = '';
+  optionalLabelText = signal('');
   optionalLabelTextChoices: string[] = ['Option 1', 'Option 2', 'Option 3'];
   firstFormGroup = this._formBuilder.group({
     firstCtrl: ['', Validators.required],
@@ -44,7 +44,7 @@ export class StepperIntlExample {
   });
 
   updateOptionalLabel() {
-    this._matStepperIntl.optionalLabel = this.optionalLabelText;
+    this._matStepperIntl.optionalLabel = this.optionalLabelText();
     // Required for the optional label text to be updated
     // Notifies the MatStepperIntl service that a change has been made
     this._matStepperIntl.changes.next();

src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html

@@ -1,5 +1,5 @@
-<button matButton="elevated" (click)="isOptional = !isOptional">
-  {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}}
+<button matButton="elevated" (click)="isOptional.set(!isOptional())">
+  {{!isOptional() ? 'Enable optional steps' : 'Disable optional steps'}}
 </button>
 
 <mat-stepper linear #stepper>
@@ -16,7 +16,7 @@
     </form>
   </mat-step>
   <!-- #docregion optional -->
-  <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
+  <mat-step [stepControl]="secondFormGroup" [optional]="isOptional()">
   <!-- #enddocregion optional -->
     <form [formGroup]="secondFormGroup">
       <ng-template matStepLabel>Fill out your address</ng-template>

src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -30,5 +30,6 @@ export class StepperOptionalExample {
   secondFormGroup = this._formBuilder.group({
     secondCtrl: '',
   });
-  isOptional = false;
+
+  isOptional = signal(false);
 }

src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html

@@ -1,7 +1,7 @@
-<button matButton="elevated" (click)="isLinear = !isLinear" id="toggle-linear">
-  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+<button matButton="elevated" (click)="isLinear.set(!isLinear())" id="toggle-linear">
+  {{!isLinear() ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
-<mat-stepper [linear]="isLinear" #stepper>
+<mat-stepper [linear]="isLinear()" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>

src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -30,5 +30,6 @@ export class StepperOverviewExample {
   secondFormGroup = this._formBuilder.group({
     secondCtrl: ['', Validators.required],
   });
-  isLinear = false;
+
+  isLinear = signal(false);
 }

src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html

@@ -1,7 +1,7 @@
-<button matButton="elevated" (click)="isLinear = !isLinear" id="toggle-linear">
-  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+<button matButton="elevated" (click)="isLinear.set(!isLinear())" id="toggle-linear">
+  {{!isLinear() ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
-<mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
+<mat-stepper orientation="vertical" [linear]="isLinear()" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>

src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -30,5 +30,6 @@ export class StepperVerticalExample {
   secondFormGroup = this._formBuilder.group({
     secondCtrl: ['', Validators.required],
   });
-  isLinear = false;
+
+  isLinear = signal(false);
 }

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

@@ -1,7 +1,8 @@
 import {Component} from '@angular/core';
-import {Observable, Observer} from 'rxjs';
+import {Observable, of} from 'rxjs';
 import {MatTabsModule} from '@angular/material/tabs';
 import {AsyncPipe} from '@angular/common';
+import {delay} from 'rxjs/operators';
 
 export interface ExampleTab {
   label: string;
@@ -20,14 +21,10 @@ export class TabGroupAsyncExample {
   asyncTabs: Observable<ExampleTab[]>;
 
   constructor() {
-    this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
-      setTimeout(() => {
-        observer.next([
-          {label: 'First', content: 'Content 1'},
-          {label: 'Second', content: 'Content 2'},
-          {label: 'Third', content: 'Content 3'},
-        ]);
-      }, 1000);
-    });
+    this.asyncTabs = of([
+      {label: 'First', content: 'Content 1'},
+      {label: 'Second', content: 'Content 2'},
+      {label: 'Third', content: 'Content 3'},
+    ]).pipe(delay(1000));
   }
 }

src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html

@@ -6,7 +6,7 @@
   class="example-drag-tabs"
   [(selectedIndex)]="selectedTabIndex"
   animationDuration="0">
-  @for (tab of tabs; track $index) {
+  @for (tab of tabs(); track $index) {
     <mat-tab>
       <ng-template mat-tab-label>
         <span

src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, signal, ViewEncapsulation} from '@angular/core';
 import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {MatTabsModule} from '@angular/material/tabs';
 
@@ -13,12 +13,12 @@ import {MatTabsModule} from '@angular/material/tabs';
   encapsulation: ViewEncapsulation.None,
 })
 export class TabGroupDragDropExample {
-  protected tabs = ['One', 'Two', 'Three', 'Four', 'Five'];
-  protected selectedTabIndex = 0;
+  protected tabs = signal(['One', 'Two', 'Three', 'Four', 'Five']);
+  protected selectedTabIndex = signal(0);
 
   drop(event: CdkDragDrop<string[]>) {
-    const prevActive = this.tabs[this.selectedTabIndex];
-    moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
-    this.selectedTabIndex = this.tabs.indexOf(prevActive);
+    const prevActive = this.tabs()[this.selectedTabIndex()];
+    moveItemInArray(this.tabs(), event.previousIndex, event.currentIndex);
+    this.selectedTabIndex.set(this.tabs().indexOf(prevActive));
   }
 }

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

@@ -14,13 +14,13 @@
 
 <mat-tab-group [selectedIndex]="selected.value"
                (selectedIndexChange)="selected.setValue($event)">
-  @for (tab of tabs; track tab; let index = $index) {
+  @for (tab of tabs(); track $index; let index = $index) {
     <mat-tab [label]="tab">
       Contents for {{tab}} tab
 
       <button matButton="elevated"
               class="example-delete-tab-button"
-              [disabled]="tabs.length === 1"
+              [disabled]="tabs().length === 1"
               (click)="removeTab(index)">
         Delete Tab
       </button>

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -24,19 +24,19 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   ],
 })
 export class TabGroupDynamicExample {
-  tabs = ['First', 'Second', 'Third'];
+  tabs = signal(['First', 'Second', 'Third']);
   selected = new FormControl(0);
 
   addTab(selectAfterAdding: boolean) {
-    this.tabs.push('New');
+    this.tabs.update(tabs => [...tabs, 'New']);
 
     if (selectAfterAdding) {
-      this.selected.setValue(this.tabs.length - 1);
+      this.selected.setValue(this.tabs().length - 1);
     }
   }
 
   removeTab(index: number) {
-    this.tabs.splice(index, 1);
+    this.tabs.update(tabs => tabs.filter((_, i) => i !== index));
     this.selected.setValue(index);
   }
 }

src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html

@@ -1,19 +1,23 @@
-<mat-tab-group>
-<!-- #docregion mat-tab-content -->
+<mat-tab-group (selectedIndexChange)="markTimeLoaded($event + 1)">
+  <!-- #docregion mat-tab-content -->
   <mat-tab label="First">
     <ng-template matTabContent>
-      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
+      Content 1 - Loaded: {{tabLoadTimes()[1] | date:'medium'}}
     </ng-template>
   </mat-tab>
-<!-- #enddocregion mat-tab-content -->
+  <!-- #enddocregion mat-tab-content -->
   <mat-tab label="Second">
     <ng-template matTabContent>
-      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
+      Content 2 - Loaded: {{tabLoadTimes()[2] | date:'medium'}}
     </ng-template>
   </mat-tab>
   <mat-tab label="Third">
     <ng-template matTabContent>
-      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
+      Content 3 - Loaded: {{tabLoadTimes()[3] | date:'medium'}}
     </ng-template>
   </mat-tab>
 </mat-tab-group>
+
+<!-- Copyright 2026 Google LLC. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at https://angular.io/license -->

src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {DatePipe} from '@angular/common';
 import {MatTabsModule} from '@angular/material/tabs';
 
@@ -11,13 +11,18 @@ import {MatTabsModule} from '@angular/material/tabs';
   imports: [MatTabsModule, DatePipe],
 })
 export class TabGroupLazyLoadedExample {
-  tabLoadTimes: Date[] = [];
+  protected tabLoadTimes = signal<Record<number, Date>>({
+    1: new Date(),
+  });
 
-  getTimeLoaded(index: number) {
-    if (!this.tabLoadTimes[index]) {
-      this.tabLoadTimes[index] = new Date();
-    }
-
-    return this.tabLoadTimes[index];
+  protected markTimeLoaded(index: number) {
+    this.tabLoadTimes.update(current =>
+      current[index]
+        ? current
+        : {
+            ...current,
+            [index]: new Date(),
+          },
+    );
   }
 }

src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html

@@ -1,9 +1,9 @@
 <!-- #docregion mat-tab-nav -->
 <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-  @for (link of links; track link) {
+  @for (link of links(); track link) {
     <a mat-tab-link
-      (click)="activeLink = link"
-      [active]="activeLink == link"> {{link}} </a>
+      (click)="activeLink.set(link)"
+      [active]="activeLink() == link"> {{link}} </a>
   }
   <a mat-tab-link disabled>Disabled Link</a>
 </nav>

src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, linkedSignal, signal} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTabsModule} from '@angular/material/tabs';
 
@@ -12,10 +12,10 @@ import {MatTabsModule} from '@angular/material/tabs';
   imports: [MatTabsModule, MatButtonModule],
 })
 export class TabNavBarBasicExample {
-  links = ['First', 'Second', 'Third'];
-  activeLink = this.links[0];
+  links = signal(['Link 1', 'Link 2', 'Link 3']);
+  activeLink = linkedSignal(() => this.links()[0]);
 
   addLink() {
-    this.links.push(`Link ${this.links.length + 1}`);
+    this.links.update(current => [...current, `Link ${current.length + 1}`]);
   }
 }

src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.html

@@ -15,4 +15,4 @@
   <mat-timepicker-toggle [for]="timepicker" matSuffix/>
 </mat-form-field>
 
-<p>Value: {{value}}</p>
+<p>Value: {{value()}}</p>

src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatTimepickerModule} from '@angular/material/timepicker';
 import {MatInputModule} from '@angular/material/input';
@@ -21,5 +21,5 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
   ],
 })
 export class TimepickerDatepickerIntegrationExample {
-  value!: Date;
+  value = signal<Date | undefined>(undefined);
 }

src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatTimepickerModule} from '@angular/material/timepicker';
 import {MatInputModule} from '@angular/material/input';
@@ -15,7 +15,7 @@ import {MatButtonModule} from '@angular/material/button';
 })
 export class TimepickerLocaleExample {
   private readonly _adapter = inject<DateAdapter<unknown, unknown>>(DateAdapter);
-  value = new Date(2024, 0, 1, 13, 45, 0);
+  value = signal(new Date(2024, 0, 1, 13, 45, 0));
 
   protected switchLocale() {
     this._adapter.setLocale('bg-BG');