-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
No menu computation/rendering should happen before user triggers a menu.
What is the current behavior?
Lets say we have 1000 mat-menu components in a page, Angular will start component life-cycle for all of these components even before menu is activated.
What are the steps to reproduce?
https://stackblitz.com/angular/lrpbkepagev?file=app%2Fmenu-overview-example.html
In above example, mat-menu* components are initialized before user clicks on anything
What is the use-case or motivation for changing an existing behavior?
Increases perf for single menu instance.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
All
Is there anything else we should know?
Not that it matters. But I would like to propose a solution for this. An based solution for this would also solve the problem where there are multiple triggers for single menu with different data. This could come in handy when there are multiple menus that are the same but require different data (Example: a menu for each table row)
<p>Clicked Item: {{triggeredButton}}</p>
<button mat-button
matMenuTriggerFor
[matMenuTriggerData]="'First button'"
[matMenuTriggerNgTemplate]="perfyMenuTemplateContainer">
First button
</button>
<button mat-button
matMenuTriggerFor
[matMenuTriggerData]="'Second button'"
[matMenuTriggerNgTemplate]="perfyMenuTemplateContainer">
Second button
</button>
<ng-template #perfyMenuTemplateContainer let-menuData>
<mat-menu>
<button mat-menu-item (click)="triggeredButton = menuData">Item 1</button>
<button mat-menu-item (click)="triggeredButton = menuData">Item 2</button>
</mat-menu>
</ng-template>