mat-menu is rendering eagerly

[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>

[mertdeg2]

@jelbourn

[jelbourn]

@crisbeto this is the same issue affecting the tabs/select/autocomplete. I'm thinking we can resolve it the same way, by optionally letting the user make an ng-template the matMenu instead of a standalone <mat-menu> element.