How do I format multiple lines in one Mat-Select Option?

Question

I have a mat-select where each mat-option has two lines - a title and description. The title and descriptions are different fonts and are displayed that way in the dropdown. I want the options to keep their formatting once selected and shown in the mat-select section, but it all becomes one line with one formatting instead, and I don't know how to separate them into different css classes once selected and displayed. Here is my HTML below:

         <mat-select [(value)]="selected">
          <mat-option *ngFor="let Option of Options" [value]="Option">
            <p class="title">{{ Option.title}}:</p>
            <p class="description">{{ Option.Description}}</p>
          </mat-option>
        </mat-select>

Is there a way to do this?

Answer 1

you can try wrapping your mat-option content with a div -

 <mat-option *ngFor="let Option of Options" [value]="Option">
<div>
  <p class="title">{{ Option.title}}:</p>
  <p class="description">{{ Option.Description}}</p>
</div>
 </mat-option>