From 126f2bbd2f2e31ccc6ecac04abcddab0b7a95b79 Mon Sep 17 00:00:00 2001
From: MichelleRetroRabbit
 <148441143+MichelleRetroRabbit@users.noreply.github.com>
Date: Fri, 9 Aug 2024 14:15:56 +0200
Subject: [PATCH] docs(material/list): Mat Selection List example is limited to
 html temp (#29348)

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

Updated the single selection list example from a template-driven form to a reactive form.

Fixes #25894

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

Added a reactive forms example to the single selection list

Fixes #25894

(cherry picked from commit 2f49eaaf5a602f5cef9dabe5cad766cfe45146e2)
---
 .../material/list/index.ts                    |  1 +
 .../list-single-selection-form-example.html   | 10 ++++++
 ...-single-selection-reactive-form-example.ts | 34 +++++++++++++++++++
 .../list-single-selection-example.html        | 19 ++++++-----
 .../list-single-selection-example.ts          | 26 +++++++++++---
 src/dev-app/list/list-demo.html               | 13 +++++++
 src/dev-app/list/list-demo.ts                 | 29 ++++++++++++++--
 7 files changed, 117 insertions(+), 15 deletions(-)
 create mode 100644 src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html
 create mode 100644 src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts

diff --git a/src/components-examples/material/list/index.ts b/src/components-examples/material/list/index.ts
index a8e23b77fc13..6c3b3ffe33ae 100644
--- a/src/components-examples/material/list/index.ts
+++ b/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';
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-form-example.html
new file mode 100644
index 000000000000..b7987183786b
--- /dev/null
+++ b/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> 
\ No newline at end of file
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
new file mode 100644
index 000000000000..1e7c7bdd931e
--- /dev/null
+++ b/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,
+    });
+  }
+}
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 0c653bd3b6da..03221a0f5159 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,9 +1,10 @@
-<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>
+<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
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 c848f921fe8c..9f616120eb8a 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,15 +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
+ * @title List with single selection using Reactive Forms
  */
 @Component({
   selector: 'list-single-selection-example',
   templateUrl: 'list-single-selection-example.html',
   standalone: true,
-  imports: [MatListModule],
+  imports: [MatListModule, FormsModule, ReactiveFormsModule],
 })
 export class ListSingleSelectionExample {
-  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
+  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,
+    });
+  }
 }
diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
index 16fcdf8af0d0..5f70c299410d 100644
--- a/src/dev-app/list/list-demo.html
+++ b/src/dev-app/list/list-demo.html
@@ -213,6 +213,19 @@ <h2>Single Selection list</h2>
     </mat-selection-list>
 
     <p>Selected: {{favoriteOptions | json}}</p>
+
+    <h4>Single Selection List with Reactive Forms</h4>
+
+    <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>
   </div>
 
   <div>
diff --git a/src/dev-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts
index b9c9c168057a..2758eed6c5d0 100644
--- a/src/dev-app/list/list-demo.ts
+++ b/src/dev-app/list/list-demo.ts
@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule, MatListOptionTogglePosition} from '@angular/material/list';
@@ -18,18 +18,39 @@ interface Link {
   name: string;
   href: string;
 }
+interface Shoes {
+  value: string;
+  name: string;
+}
 
 @Component({
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
   styleUrl: 'list-demo.css',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatListModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    ReactiveFormsModule,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListDemo {
   items: string[] = ['Pepper', 'Salt', 'Paprika'];
 
+  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();
+
   togglePosition: MatListOptionTogglePosition = 'before';
 
   contacts: {name: string; headline: string}[] = [
@@ -84,6 +105,10 @@ export class ListDemo {
     this.activatedRoute.url.subscribe(() => {
       this.cdr.markForCheck();
     });
+
+    this.form = new FormGroup({
+      shoes: this.shoesControl,
+    });
   }
 
   onSelectedOptionsChange(values: string[]) {