am trying to figure out if there's a to sort the items(buttons) inside the menu in alphabetical order by means of a function in the typescript file, please the following code which uses angular material.
<mat-menu #menu3="matMenu" [overlapTrigger]="false">
<button mat-menu-item [routerLink]="['A']">A</button>
<button mat-menu-item [routerLink]="['C']">C</button>
<button mat-menu-item [routerLink]="['D']">D</button>
<button mat-menu-item [routerLink]="['B']">B</button>
</mat-menu>
You can add the menu items in an array, sort the array, then render it using *ngFor , smth similar to:
public menuItems: string[] = ["C", "B", "A"];
// use sort() to sort the array in ngOnInit() or wherever convenient
ngOnInit() {
this.menuItems = this.menuItems.sort();
}
then in the template bind the soreted array to *ngFor
<mat-menu #menu3="matMenu" [overlapTrigger]="false">
<button mat-menu-item
*ngFor="let item of menuItems"
[routerLink]="[item]">{{ item }}
</button>
</mat-menu>
Check MDN for sort() docs Here for custom sorting, etc ...