docs: convert select/sidenav/slidetog/slider/snackb/sort to signals

src/components-examples/material/select/select-form/select-form-example.html

@@ -8,7 +8,7 @@ <h4>mat-select</h4>
       }
     </mat-select>
   </mat-form-field>
-  <p> Selected food: {{selectedValue}} </p>
+  <p> Selected food: {{selectedValue()}} </p>
   <h4>native html select</h4>
   <mat-form-field>
     <mat-label>Favorite car</mat-label>
@@ -19,5 +19,5 @@ <h4>native html select</h4>
       }
     </select>
   </mat-form-field>
-  <p> Selected car: {{selectedCar}} </p>
+  <p> Selected car: {{selectedCar()}} </p>
 </form>

src/components-examples/material/select/select-form/select-form-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -23,8 +23,8 @@ interface Car {
   imports: [FormsModule, MatFormFieldModule, MatSelectModule, MatInputModule],
 })
 export class SelectFormExample {
-  selectedValue!: string;
-  selectedCar = '';
+  selectedValue = signal('');
+  selectedCar = signal('');
 
   foods: Food[] = [
     {value: 'steak-0', viewValue: 'Steak'},

src/components-examples/material/select/select-initial-value/select-initial-value-example.html

@@ -8,7 +8,7 @@ <h4>Basic mat-select with initial value</h4>
     }
   </mat-select>
 </mat-form-field>
-<p>You selected: {{selectedFood}}</p>
+<p>You selected: {{selectedFood()}}</p>
 
 <h4>Basic native select with initial value</h4>
 <mat-form-field>
@@ -17,8 +17,8 @@ <h4>Basic native select with initial value</h4>
     <option value=""></option>
     @for (option of cars; track option) {
       <option [value]="option.value"
-            [selected]="selectedCar === option.value">{{ option.viewValue }}</option>
+            [selected]="selectedCar() === option.value">{{ option.viewValue }}</option>
     }
   </select>
 </mat-form-field>
-<p>You selected: {{selectedCar}}</p>
+<p>You selected: {{selectedCar()}}</p>

src/components-examples/material/select/select-initial-value/select-initial-value-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
@@ -33,10 +33,10 @@ export class SelectInitialValueExample {
     {value: 'chevrolet', viewValue: 'Chevrolet'},
     {value: 'dodge', viewValue: 'Dodge'},
   ];
-  selectedFood = this.foods[2].value;
-  selectedCar = this.cars[0].value;
+  selectedFood = signal(this.foods[2].value);
+  selectedCar = signal(this.cars[0].value);
 
   selectCar(event: Event) {
-    this.selectedCar = (event.target as HTMLSelectElement).value;
+    this.selectedCar.set((event.target as HTMLSelectElement).value);
   }
 }

src/components-examples/material/select/select-selectable-null/select-selectable-null-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
 })
 export class SelectSelectableNullExample {
-  value: number | null = null;
+  value = signal<number | null>(null);
   options = [
     {label: 'None', value: null},
     {label: 'One', value: 1},

src/components-examples/material/select/select-value-binding/select-value-binding-example.html

@@ -8,4 +8,4 @@
   </mat-select>
 </mat-form-field>
 
-<p>You selected: {{selected}}</p>
+<p>You selected: {{selected()}}</p>

src/components-examples/material/select/select-value-binding/select-value-binding-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -9,5 +9,5 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   imports: [MatFormFieldModule, MatSelectModule],
 })
 export class SelectValueBindingExample {
-  selected = 'option2';
+  selected = signal('option2');
 }

src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html

@@ -1,10 +1,10 @@
 <mat-drawer-container class="example-container" autosize>
   <mat-drawer #drawer class="example-sidenav" mode="side">
     <p>Auto-resizing sidenav</p>
-    @if (showFiller) {
+    @if (showFiller()) {
       <p>Lorem, ipsum dolor sit amet consectetur.</p>
     }
-    <button (click)="showFiller = !showFiller" matButton="elevated">
+    <button (click)="showFiller.set(!showFiller())" matButton="elevated">
       Toggle extra text
     </button>
   </mat-drawer>

src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatSidenavModule} from '@angular/material/sidenav';
 
@@ -12,5 +12,5 @@ import {MatSidenavModule} from '@angular/material/sidenav';
   imports: [MatSidenavModule, MatButtonModule],
 })
 export class SidenavAutosizeExample {
-  showFiller = false;
+  showFiller = signal(false);
 }

src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html

@@ -7,7 +7,7 @@
 
     <mat-sidenav-content>
       <p><button matButton (click)="sidenav.open()">Open</button></p>
-      <p>Closed due to: {{reason}}</p>
+      <p>Closed due to: {{reason()}}</p>
     </mat-sidenav-content>
   </mat-sidenav-container>
 } @else {

src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts

@@ -1,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
 import {MatButtonModule} from '@angular/material/button';
 
@@ -10,13 +10,13 @@ import {MatButtonModule} from '@angular/material/button';
   imports: [MatSidenavModule, MatButtonModule],
 })
 export class SidenavDisableCloseExample {
-  @ViewChild('sidenav') sidenav!: MatSidenav;
+  sidenav = viewChild.required<MatSidenav>('sidenav');
 
-  reason = '';
+  reason = signal('');
 
   close(reason: string) {
-    this.reason = reason;
-    this.sidenav.close();
+    this.reason.set(reason);
+    this.sidenav().close();
   }
 
   shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);

src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts

@@ -12,6 +12,6 @@ import {MatButtonModule} from '@angular/material/button';
   imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
 })
 export class SidenavModeExample {
-  mode = new FormControl('over' as MatDrawerMode);
+  mode = new FormControl<MatDrawerMode>('over');
   shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
 }

src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html

@@ -1,7 +1,7 @@
 @if (shouldRun) {
   <mat-sidenav-container class="example-container">
-    <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
-                (closed)="events.push('close!')">
+    <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="trackEvent('open!')"
+                (closed)="trackEvent('close!')">
       Sidenav content
     </mat-sidenav>
 
@@ -10,7 +10,7 @@
       <p><button matButton (click)="sidenav.toggle()">sidenav.toggle()</button></p>
       <p>Events:</p>
       <div class="example-events">
-        @for (e of events; track e) {
+        @for (e of events(); track $index) {
           <div>{{e}}</div>
         }
       </div>

src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {FormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -12,8 +12,12 @@ import {MatSidenavModule} from '@angular/material/sidenav';
   imports: [MatSidenavModule, MatCheckboxModule, FormsModule, MatButtonModule],
 })
 export class SidenavOpenCloseExample {
-  events: string[] = [];
-  opened = false;
+  events = signal<('open!' | 'close!')[]>([]);
+  opened = signal(false);
 
   shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
+
+  trackEvent(event: 'open!' | 'close!') {
+    this.events.update(events => [...events, event]);
+  }
 }

src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.html

@@ -19,8 +19,8 @@ <h2 class="example-h2">Result</h2>
     <section class="example-section">
       <mat-slide-toggle
           class="example-margin"
-          [checked]="checked"
-          [disabled]="disabled">
+          [checked]="checked()"
+          [disabled]="disabled()">
         Slide me!
       </mat-slide-toggle>
     </section>

src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {FormsModule} from '@angular/forms';
@@ -15,6 +15,6 @@ import {MatCardModule} from '@angular/material/card';
   imports: [MatCardModule, MatRadioModule, FormsModule, MatCheckboxModule, MatSlideToggleModule],
 })
 export class SlideToggleConfigurableExample {
-  checked = false;
-  disabled = false;
+  checked = signal(false);
+  disabled = signal(false);
 }

src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html

@@ -1,6 +1,6 @@
 <p>Slide Toggle using a simple NgModel.</p>
 
-<mat-slide-toggle [(ngModel)]="isChecked">Slide Toggle Checked: {{isChecked}}</mat-slide-toggle>
+<mat-slide-toggle [(ngModel)]="isChecked">Slide Toggle Checked: {{isChecked()}}</mat-slide-toggle>
 
 <p>Slide Toggle inside of a Template-driven form</p>
 

src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -15,7 +15,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 export class SlideToggleFormsExample {
   private _formBuilder = inject(FormBuilder);
 
-  isChecked = true;
+  isChecked = signal(true);
   formGroup = this._formBuilder.group({
     enableWifi: '',
     acceptTerms: ['', Validators.requiredTrue],

src/components-examples/material/slider/slider-configurable/slider-configurable-example.html

@@ -45,12 +45,12 @@ <h2>Result</h2>
     </div>
     <mat-slider
         class="example-margin"
-        [disabled]="disabled"
-        [max]="max"
-        [min]="min"
-        [step]="step"
-        [discrete]="thumbLabel"
-        [showTickMarks]="showTicks">
+        [disabled]="disabled()"
+        [max]="max()"
+        [min]="min()"
+        [step]="step()"
+        [discrete]="thumbLabel()"
+        [showTickMarks]="showTicks()">
       <input matSliderThumb [(ngModel)]="value" #slider>
     </mat-slider>
   </mat-card-content>

src/components-examples/material/slider/slider-configurable/slider-configurable-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {FormsModule} from '@angular/forms';
@@ -23,11 +23,11 @@ import {MatCardModule} from '@angular/material/card';
   ],
 })
 export class SliderConfigurableExample {
-  disabled = false;
-  max = 100;
-  min = 0;
-  showTicks = false;
-  step = 1;
-  thumbLabel = false;
-  value = 0;
+  disabled = signal(false);
+  max = signal(100);
+  min = signal(0);
+  showTicks = signal(false);
+  step = signal(1);
+  thumbLabel = signal(false);
+  value = signal(0);
 }

src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {
   MatSnackBar,
   MatSnackBarAction,
@@ -23,11 +23,11 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 export class SnackBarAnnotatedComponentExample {
   private _snackBar = inject(MatSnackBar);
 
-  durationInSeconds = 5;
+  durationInSeconds = signal(5);
 
   openSnackBar() {
     this._snackBar.openFromComponent(PizzaPartyAnnotatedComponent, {
-      duration: this.durationInSeconds * 1000,
+      duration: this.durationInSeconds() * 1000,
     });
   }
 }

src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
@@ -17,11 +17,11 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 export class SnackBarComponentExample {
   private _snackBar = inject(MatSnackBar);
 
-  durationInSeconds = 5;
+  durationInSeconds = signal(5);
 
   openSnackBar() {
     this._snackBar.openFromComponent(PizzaPartyComponent, {
-      duration: this.durationInSeconds * 1000,
+      duration: this.durationInSeconds() * 1000,
     });
   }
 }

src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {
   MatSnackBar,
   MatSnackBarHorizontalPosition,
@@ -20,13 +20,13 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 export class SnackBarPositionExample {
   private _snackBar = inject(MatSnackBar);
 
-  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
-  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+  horizontalPosition = signal<MatSnackBarHorizontalPosition>('start');
+  verticalPosition = signal<MatSnackBarVerticalPosition>('bottom');
 
   openSnackBar() {
     this._snackBar.open('Cannonball!!', 'Splash', {
-      horizontalPosition: this.horizontalPosition,
-      verticalPosition: this.verticalPosition,
+      horizontalPosition: this.horizontalPosition(),
+      verticalPosition: this.verticalPosition(),
     });
   }
 }

src/components-examples/material/sort/sort-harness/sort-harness-example.html

@@ -7,7 +7,7 @@
     <th mat-sort-header="protein">Protein</th>
   </tr>
 
-  @for (dessert of sortedData; track dessert) {
+  @for (dessert of sortedData(); track dessert) {
     <tr>
       <td>{{dessert.name}}</td>
       <td>{{dessert.calories}}</td>