I have a mat-select
component that contains custom options (with additional menu "Set as default"):
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<span>Set as default</span>
</button>
</mat-menu>
</mat-option>
</mat-select>
</mat-form-field>
However, when I open the menu, select option list disappears and I can see only "Set as default" pop-up.
Can we show "Set as default" on top of the select option list somehow or it is impossible in Angular Material?
This is a link to Stackblitz with the code: https://stackblitz.com/edit/angular-material-playground-hcw1wo?file=src/app/app.component.html
You Can try mat-menu for nested menu items:
<button mat-raised-button [matMenuTriggerFor]="main_menu">Favorite food</button>
<mat-menu #main_menu="matMenu">
<ng-container *ngFor="let food of foods">
<button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ food.value }}</button>
<mat-menu #sub_menu="matMenu">
<button mat-menu-item>Set as default</button>
</mat-menu>
</ng-container>
</mat-menu>
Or try mat-optgroup
of mat-select
Reference: https://material.angular.io/components/select/examples
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.