Store multiple properties in Angular mat-list component

441 Views Asked by At

When using the Angular 11 mat-list-option component, I can set the [value] property as follows:

   <mat-selection-list [multiple]="false" #data (selectionChange)="onSelection($event)">
        <mat-list-option *ngFor="let element of rawData" [value]="element.code">
            {{element.name}}
        </mat-list-option>
    </mat-selection-list>

With the code above, the page shows the "name" property from my list and sets the "code" property as the value. This way when the user clicks the item, I can get the code and send it to another component. I have two other properties (description, source) that I'd also like to store in the list item. What is the best way to store all 3 properties (code, description and source) so that they are easily retrieved when the user selects the item in the list?

0

There are 0 best solutions below