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

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,34 @@
+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
+ */
+@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,
+    });
+  }
+}