From 40ab441f7c54354b55789e36868df0388f359896 Mon Sep 17 00:00:00 2001
From: Ruslan Lekhman <lekhman112@gmail.com>
Date: Sat, 4 Oct 2025 22:55:59 -0600
Subject: [PATCH] docs(material/list): single selection example

- Revert single selection example from #29348

close #31989
---
 ...ngle-selection-reactive-form-example.html} |  2 +-
 ...-single-selection-reactive-form-example.ts |  3 ++-
 .../list-single-selection-example.html        | 19 +++++++-------
 .../list-single-selection-example.ts          | 26 +++----------------
 4 files changed, 16 insertions(+), 34 deletions(-)
 rename src/components-examples/material/list/list-single-selection-reactive-form/{list-single-selection-form-example.html => list-single-selection-reactive-form-example.html} (97%)

diff --git a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html b/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.html
similarity index 97%
rename from src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html
rename to src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.html
index b7987183786b..d121016c525d 100644
--- a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html
+++ b/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> 
\ No newline at end of file
+</form>
diff --git a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts b/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts
index 792f785200a0..15638f509367 100644
--- a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts
+++ b/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 {
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
index 03221a0f5159..0c653bd3b6da 100644
--- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
+++ b/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>
\ No newline at end of file
+<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>
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts
index 4f9fbd0f29bf..7027d7c290a7 100644
--- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts
+++ b/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'];
 }