docs(material/list): Mat Selection List example is limited to html te…

…mp (#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 2f49eaa)

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,
+    });
+  }
+}

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>

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,
+    });
+  }
 }

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>

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[]) {