I want to customize the options of a Select component by adding HTML elements. Here is an example:
<mat-select [(ngModel)]="items">
<mat-option *ngFor="let item of ($items | async)" [value]="item.id">
<span>{{item.name}}</span>
<br>
<small>{{item.description}}</small>
</mat-option>
</mat-select>
While this setup works well, there is a small issue. When an option is selected, the value of the Select component is displayed as
{{item.name}}{{item.description}}
, combining both name and description. However, I only need the item name as the value for the Select component.
Is there a solution to this problem?