Dynamic mat-menu in Angular

Question

I want to dynamically add items for [matMenuTriggerFor] and trigger its corresponding template. But I can't seem to find a way to do it.

<ng-container *ngFor="let input of filterInputs">
        <button class="child-menu" mat-menu-item [matMenuTriggerFor]="dateSubmit" disableRipple>
            <span class="filter-type-label">{{ input.label }}</span>
        </button>
    </ng-container>

<ng-container *ngFor="let input of filterInputs">
    <mat-menu #dateSubmit="matMenu">
        <date-filter class="full" (dateSelected)="applyFilter($event)" prevent-menu-close> 
 </date-filter>
    </mat-menu>
</ng-container> 

For each input I need a button with [matMenuTriggerFor] and its reference in the second ng-container. Any advise would be greatly appreciated!

Answer 1

Not use two separates loop: include the <mat-menu #dateSubmit..> after the </button>

<ng-container *ngFor="let input of filterInputs">
        <button class="child-menu" mat-menu-item 
            [matMenuTriggerFor]="dateSubmit" disableRipple>
            <span class="filter-type-label">{{ input.label }}</span>
        </button>
        <mat-menu #dateSubmit="matMenu">
           <date-filter class="full" (dateSelected)="applyFilter($event)" 
                                                          prevent-menu-close> 
           </date-filter>
       </mat-menu>
</ng-container> 

Rememeber that the "template references variables" have his own "scope".