Reports

Tty this:

ts:

import { Component } from '@angular/core';
import { MatListOption, MatSelectionList } from '@angular/material/list';

@Component({
  selector: 'app-list-single-selection',
  standalone: true,
  imports: [MatSelectionList, MatListOption],
  templateUrl: './list-single-selection.component.html'
})

export class listSingleSelectionComponent {
  listOptions = [
    {value: 'boots', name: 'Boots'},
    {value: 'clogs', name: 'Clogs'},
    {value: 'loafers', name: 'Loafers'},
  ]
}

html:

<mat-selection-list [multiple]="false">
    @for (listItem of listOptions; track $index) {
    <mat-list-option [value]="listItem.value">
        {{listItem.name}}
    </mat-list-option>
    }
</mat-selection-list>

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

79739994