fix(material/list): Mat Selection List example is limited to html temp

Added a reactive forms example to the single selection list

Fixes #25894

Author: MichelleRetroRabbit

src/components-examples/material/list/index.ts

@@ -2,5 +2,6 @@ export {ListOverviewExample} from './list-overview/list-overview-example';
 export {ListSectionsExample} from './list-sections/list-sections-example';
 export {ListSelectionExample} from './list-selection/list-selection-example';
 export {ListSingleSelectionExample} from './list-single-selection/list-single-selection-example';
+export {ListSingleSelectionReactiveFormExample} from './list-single-selection-reactive-form/list-single-selection-reactive-form-example';
 export {ListHarnessExample} from './list-harness/list-harness-example';
 export {ListVariantsExample} from './list-variants/list-variants-example';

src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html

@@ -0,0 +1,10 @@
+<form [formGroup]="form">
+  <mat-selection-list #shoesList [formControl]="shoesControl" name="shoes" [multiple]="false">
+    @for (shoe of shoes; track shoe) {
+      <mat-list-option [value]="shoe.value">{{shoe.name}}</mat-list-option>
+    }
+  </mat-selection-list>
+  <p>
+     Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}} 
+  </p>
+</form> 

src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatListModule} from '@angular/material/list';
+interface Shoes {
+  value: string;
+  name: string;
+}
+/**
+ * @title List with single selection using a Reactive Forms approach
+ */
+@Component({
+  selector: 'list-single-selection-reactive-form-example',
+  templateUrl: 'list-single-selection-form-example.html',
+  standalone: true,
+  imports: [MatListModule, FormsModule, ReactiveFormsModule],
+})
+export class ListSingleSelectionReactiveFormExample {
+  form: FormGroup;
+  shoes: Shoes[] = [
+    {value: 'boots', name: 'Boots'},
+    {value: 'clogs', name: 'Clogs'},
+    {value: 'loafers', name: 'Loafers'},
+    {value: 'moccasins', name: 'Moccasins'},
+    {value: 'sneakers', name: 'Sneakers'},
+  ];
+  shoesControl = new FormControl();
+
+  constructor() {
+    this.form = new FormGroup({
+      clothes: this.shoesControl,
+    });
+  }
+}

src/components-examples/material/list/list-single-selection/list-single-selection-example.html

@@ -1,10 +1,9 @@
-<form [formGroup]="form">
-  <mat-selection-list #shoesList [formControl]="shoesControl" name="shoes" [multiple]="false">
-    @for (shoe of shoes; track shoe) {
-      <mat-list-option [value]="shoe.value">{{shoe.name}}</mat-list-option>
-    }
-  </mat-selection-list>
-  <p>
-     Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}} 
-  </p>
-</form>
+<mat-selection-list #shoes [multiple]="false">
+  @for (shoe of typesOfShoes; track shoe) {
+    <mat-list-option [value]="shoe">{{shoe}}</mat-list-option>
+  }
+</mat-selection-list>
+
+<p>
+  Option selected: {{shoes.selectedOptions.hasValue() ? shoes.selectedOptions.selected[0].value : 'None'}}
+</p>

src/components-examples/material/list/list-single-selection/list-single-selection-example.ts

@@ -1,33 +1,15 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatListModule} from '@angular/material/list';
-interface Shoes {
-  value: string;
-  name: string;
-}
+
 /**
- * @title List with single selection using Reactive Forms
+ * @title List with single selection
  */
 @Component({
   selector: 'list-single-selection-example',
   templateUrl: 'list-single-selection-example.html',
   standalone: true,
-  imports: [MatListModule, FormsModule, ReactiveFormsModule],
+  imports: [MatListModule],
 })
 export class ListSingleSelectionExample {
-  form: FormGroup;
-  shoes: Shoes[] = [
-    {value: 'boots', name: 'Boots'},
-    {value: 'clogs', name: 'Clogs'},
-    {value: 'loafers', name: 'Loafers'},
-    {value: 'moccasins', name: 'Moccasins'},
-    {value: 'sneakers', name: 'Sneakers'},
-  ];
-  shoesControl = new FormControl();
-
-  constructor() {
-    this.form = new FormGroup({
-      clothes: this.shoesControl,
-    });
-  }
+  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
 }