docs: convert select/sidenav/slidetog/slider/snackb/sort to signals (#33502)

(cherry picked from commit f4a0915)

Author: msmallest

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 {