docs: convert Stepper/Tabs/Timepicker example to signals (#33536)

Author: msmallest

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));
   }
 }