docs(material/list): single selection example (#31990)

- Revert single selection example from #29348

close #31989

(cherry picked from commit 38ac513)

Author: lekhmanrus

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

@@ -7,4 +7,4 @@
   <p>
      Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}} 
   </p>
-</form> 
+</form>

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

@@ -6,12 +6,13 @@ 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',
+  templateUrl: 'list-single-selection-reactive-form-example.html',
   imports: [MatListModule, FormsModule, ReactiveFormsModule],
 })
 export class ListSingleSelectionReactiveFormExample {

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,32 +1,14 @@
 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',
-  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'];
 }