Search code examples
angularangular-materialmat-list

mat-selection-list with an object , is it possible?


I have been looking at the mat-selection-list found in the material.angular.io documentation at material.angular.io/components/list/overview

I would like to use a array of objects instead of using a string array . The documentation has

 typesOfShoes: string[] = ['Falta passar fio', 'Peça oxidada'];

And this seems to work but my object, below, doesn't work. What I am doing wrong? or is this not possible?

errorList = [
    { id: 1234, type: 'A1', description: 'dsfdsfdfgdgdgfio', selected:false },
    { id: 4567, type: 'C6', description: 'Pesdffsdça sdfsd', selected:false },
    { id: 7890, type: 'A5', description: 'sdfdsfc', selected:false }
];

<mat-selection-list #errorList class="area-block ">
    <mat-list-option *ngFor="let err of errorList " style="color: #000000;">
        {{err.type}}           
    </mat-list-option>
</mat-selection-list>

<p style="color: #000000;" class="area-block">
    Options selected: {{errorList.selectedOptions.selected.length}}
</p>

Solution

  • You could do something like this:

    <mat-selection-list #book [multiple]="false">
      <mat-list-option *ngFor="let book of books" [value]="book">
        {{ book.name }}
      </mat-list-option>
    </mat-selection-list>
    

    Notice: I set #book, maybe you should set #err instead of #errorList