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?