Angular Material 2 MatMenu - Dynamically creation

Question

I need to dynamically create a bunch of MdMenu. So far I have no idea of how can I:

1 - Create a template reference variable dynamically (for the md-menu component)

2 - Reference the dynamically created variable (to use in the [mdMenuTriggerFor] attribute of the trigger)

I've searched a little and found nothing about it.

Does anyone manage do deal with it?

[EDIT]: Just got an idea. What I'm thinking: encapsulating the trigger and the md-menu in a component (the template reference variable is component scoped, so there will be no conflicts) and pass the necessary parameters to this component by using one-way data-binding. It's kind of late here in Brazil, but I intend to try it tomorrow.

Answer 1

Solved encapsulating the MdMenu and the associated trigger in an Angular custom component.

Scenario: There's an array of objects that must be shown in a table. The last column of the table must show the MdMenu with two options: Edit and Delete.

So I made a custom angular component containing just the MdMenu and its trigger inside it. This component uses two way data bind to receives the object that must be edited/deleted and proceed with the desired action:

• If the purpose is to edit, shows a dialog to edit the data

• If the purpose is to delete, it deletes the data

  Once the action is successful completed, the host of the custom component must perform one of two actions:

  1 - update the array replacing/deleting the edited/removed element

  2 - update the entire array, asking for all its forming data again from the server

In both cases, you'll have to monitor the changes and do any updates in the array whenever the update/deletion is finished. An alternative is create other two-way data bound variable and pass the entire array as a two-way data bound parameter to the custom component.

I built up this stackblitz to better show it: https://stackblitz.com/edit/repeating-menu-approach-1

<table>
  <tr *ngFor="let el of [1,2,3,4,5]">
    <td>Text line of menu {{el}}</td>
    <td style="width: 5%">
      <menu-overview-example [x]="el" (clickedItem)="hostClickHandler($event)"></menu-overview-example>
    </td>
  </tr>
</table>

[EDIT]

Another aproach

Actually there's one more way to do it: you can use <ng-container> and it will just create a scope for your template variable (https://stackblitz.com/edit/repeating-menu-approach-2):**

<table>
  <ng-container *ngFor="let el of [1,2,3,4,5]">
    <tr>
      <td>Text line of menu {{el}}</td>
      <td style="width: 5%">
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="clickHandler('Item 1 of Menu ' + el)">Menu {{el}}:Item 1</button>
          <button mat-menu-item (click)="clickHandler('Item 2 of Menu ' + el)">Menu {{el}}:Item 2</button>
        </mat-menu>
      </td>
    </tr>
  </ng-container>
</table>

Interestingly, each #menu template variable above will be unique, successfully isolated from the others #menu template variables created by the *ngFor loop.