Skip to content

mat-menu is rendering eagerly #9251

@mertdeg2

Description

@mertdeg2

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>

Metadata

Metadata

Assignees

Labels

GThis is is related to a Google internal issueP2The issue is important to a large percentage of users, with a workaroundperfThis issue is related to performance

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions