Hide second line on a multi-line mat-select

Question

I have been tasked with creating a drop down that has the style of

The code for this is

<mat-select >
    <mat-option *ngFor="let type of source"
                style="min-height: 48px; line-height: normal; height: auto; padding: 10px 20px;" [value]="type.value">
        <div class="u-textSize14">{{type.displayName}}</div>
        <div class="u-textSize12">{{type.hint}}</div>
    </mat-option>
</mat-select>

When I select an option, the selected item appears as

"Standard UrlDomainName.com", is there any way I could hide the second line / hint when an item is selected and make it only appear when the mat select is open

Answer 1

To customize your selected option, use <mat-select-trigger> within the <mat-select> :

<mat-select [formControl]="foo">
    <mat-select-trigger>{{foo.value ? foo.value[0] : ''}}</mat-select-trigger>
    <mat-option *ngFor="let item of items" [value]="item.val">{{item.label}} - {{item.desc}}</mat-option>
</mat-select>