docs-bug(mat-selection-list): Mat Selection List example is limited to html templating

[DanielAJL]

Documentation Feedback

It would be really nice if there could be some example implemented that can bind data to the component inside the *.component.ts file. The current example only seems to work with HTML templating, but what if we want to retrieve the value outside of the HTML?

Current mat list with single selection example:

<mat-selection-list #shoes [multiple]="false">
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Option selected: {{shoes.selectedOptions.selected[0]?.value}}
</p>

As a proposed example it would be nice to have a Reactive Forms approach where we can retrieve the data from the FormGroup and even validate it right away before the data. I think this approach would also open up the data to be displayed as well as received.
Some kind of example proposal:

<form id="exampleId" [formGroup]="matListExampleFormGroup">
  <mat-selection-list #list formControlName="experienceLevel" [multiple]="false">
    <mat-list-option *ngFor="let exp of experiences" [value]="exp">
      {{exp}}
    </mat-list-option>
  </mat-selection-list>
</form>

I checked back the version history and noticed the same example from v6 - v14 (slightly different as we approach old versions).

Affected documentation page

https://material.angular.io/components/list/examples