From d7e61cca169f17fc6466f1980fd1c7cc7f97fd3d Mon Sep 17 00:00:00 2001 From: Michael Small Date: Wed, 15 Jul 2026 23:16:10 -0500 Subject: [PATCH] docs: convert Stepper/Tabs/Timepicker example to signals --- .../stepper-editable-example.html | 8 +++---- .../stepper-editable-example.ts | 5 +++-- .../stepper-intl/stepper-intl-example.ts | 6 +++--- .../stepper-optional-example.html | 6 +++--- .../stepper-optional-example.ts | 5 +++-- .../stepper-overview-example.html | 6 +++--- .../stepper-overview-example.ts | 5 +++-- .../stepper-vertical-example.html | 6 +++--- .../stepper-vertical-example.ts | 5 +++-- .../tab-group-async-example.ts | 17 +++++++-------- .../tab-group-drag-drop-example.html | 2 +- .../tab-group-drag-drop-example.ts | 12 +++++------ .../tab-group-dynamic-example.html | 4 ++-- .../tab-group-dynamic-example.ts | 10 ++++----- .../tab-group-lazy-loaded-example.html | 16 ++++++++------ .../tab-group-lazy-loaded-example.ts | 21 ++++++++++++------- .../tab-nav-bar-basic-example.html | 6 +++--- .../tab-nav-bar-basic-example.ts | 8 +++---- ...picker-datepicker-integration-example.html | 2 +- ...mepicker-datepicker-integration-example.ts | 4 ++-- .../timepicker-locale-example.ts | 4 ++-- 21 files changed, 84 insertions(+), 74 deletions(-) diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html index 8dc4135bc166..f5294df6a264 100644 --- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html +++ b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html @@ -1,10 +1,10 @@ - - +
@@ -19,7 +19,7 @@
- +
Fill out your address diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts index 19d1e9d4db83..d4c9e12c3c01 100644 --- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts +++ b/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); } diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts index c163ec061d10..d663a3a336a0 100644 --- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts +++ b/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(); diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html index d177ccc2db90..b0fe17d498c7 100644 --- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html +++ b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html @@ -1,5 +1,5 @@ - @@ -16,7 +16,7 @@
- +
Fill out your address diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts index 85b7178254a0..e30d3c21e123 100644 --- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts +++ b/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); } diff --git a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html index a7f6fd0ad978..61a71c2d6334 100644 --- a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html +++ b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html @@ -1,7 +1,7 @@ - - + Fill out your name diff --git a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts index ddf7037d048e..821c69d3c8e7 100644 --- a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts +++ b/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); } diff --git a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html index 1f3aeadb108e..c7fecc24ccf4 100644 --- a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html +++ b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html @@ -1,7 +1,7 @@ - - + Fill out your name diff --git a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts index 539a1c185412..e636f9100987 100644 --- a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts +++ b/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); } diff --git a/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts b/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts index 70f51e7490e0..1d1d6c4b9c0d 100644 --- a/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts +++ b/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; constructor() { - this.asyncTabs = new Observable((observer: Observer) => { - 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)); } } diff --git a/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html b/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html index 4d7007e71809..3011b5cdfbb7 100644 --- a/src/components-examples/material/tabs/tab-group-drag-drop/tab-group-drag-drop-example.html +++ b/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) { ) { - 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)); } } diff --git a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html index f4e8d3e46e3a..5351d28c5856 100644 --- a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html +++ b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html @@ -14,13 +14,13 @@ - @for (tab of tabs; track tab; let index = $index) { + @for (tab of tabs(); track $index; let index = $index) { Contents for {{tab}} tab diff --git a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts index de18cf4af048..ef760d5db1a6 100644 --- a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts +++ b/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); } } diff --git a/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html b/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html index 84f40a6021c9..e304a4bfc9ab 100644 --- a/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html +++ b/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html @@ -1,19 +1,23 @@ - - + + - Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}} + Content 1 - Loaded: {{tabLoadTimes()[1] | date:'medium'}} - + - Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}} + Content 2 - Loaded: {{tabLoadTimes()[2] | date:'medium'}} - Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}} + Content 3 - Loaded: {{tabLoadTimes()[3] | date:'medium'}} + + \ No newline at end of file diff --git a/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts b/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts index f2c0ac853b87..735ae81d54fe 100644 --- a/src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts +++ b/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>({ + 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(), + }, + ); } } diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html index 9b90615a2573..a4a701bef4cf 100644 --- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html +++ b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html @@ -1,9 +1,9 @@ diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts index 15436e22e03f..9c297fe52c14 100644 --- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts +++ b/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}`]); } } diff --git a/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.html b/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.html index b33725aa847a..1daa1020afb8 100644 --- a/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.html +++ b/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.html @@ -15,4 +15,4 @@ -

Value: {{value}}

+

Value: {{value()}}

diff --git a/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.ts b/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.ts index cb4430d47f77..adbab77b49be 100644 --- a/src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.ts +++ b/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(undefined); } diff --git a/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.ts b/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.ts index b25d64b193d5..b105549d3d2d 100644 --- a/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.ts +++ b/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); - 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');