Show multiple default values with chips on Angular Material mat-select inside...

I have this code with mat-select which has a text inside the mat-select-trigger. When the component loads, it does not show this text or what ever value that is there. It will only show the value inside mat-select-trigger once we click on an option.
I need this because I want to show the previously selected and saved options on the mat-select (in form of mat-chip) so that the user would be able to see the previously selected options.
So placeholder text won't be useful here.

<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
// The following Sample text or any dynamic value will not be displayed on the
// initial run. It only shows the value if an option is selected from the
// dropdown
<mat-select-trigger> Sample text </mat-select-trigger>
@for (topping of toppingList; track topping) {
<mat-option [value]="topping">{{topping}}</mat-option>
}
</mat-select>
</mat-form-field>


StackBlitz link: https://stackblitz.com/edit/skhgptxb-m23a87cp?file=src/example/select-custom-trigger-example.html

Ideally I want to have this with the mat-select-trigger:

<mat-select-trigger>
<div class="chips">
@for (option of options; track $index) {
<mat-chip (removed)="removeOption(option)">
{{ option.title }}
<button matChipRemove>
<mat-icon>remove_circle_outline</mat-icon>
</button>
</mat-chip>
}
</div>
</mat-select-trigger>

Continue reading...