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: .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>
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/edit/skhgptxb-m23a87cp?file=src%2Fexample%2Fselect-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>
1 Answer
Reset to default 0<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-select-trigger>
<div class="chips">
@for (topping of toppings.value; track $index) {
<mat-chip (removed)="removeTopping(topping)">
{{ topping }}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
}
</div>
</mat-select-trigger>
@for (topping of toppingList; track topping) {
<mat-option [value]="topping">{{topping}}</mat-option>
}
</mat-select>
</mat-form-field>
.chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.placeholder {
color: rgba(0, 0, 0, 0.54);
font-size: 14px;
}