matMenuTrigger openMenu not showing the menu when called with *ngFor

Question

Good evening, I have this component:

HTML

<button mat-menu-item
  #leagueMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="leagueMenu"
  (mousedown)="onMouseDown(leagueMenuTrigger)">
  {{group.group_name}} 
</button>

<mat-menu #leagueMenu="matMenu">
<button mat-menu-item>
Club Home {{group.group_id}}
</button>
<button mat-menu-item>
Events    
</button>
<button mat-menu-item>
Player Roster    
</button>
<button mat-menu-item>
Results and Standings
</button>
<button mat-menu-item>
Ledger
</button>
<button mat-menu-item>
Club Settings
</button>
</mat-menu>

TS

import { OnInit, Component, Input, AfterViewInit } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';
import { Group } from 'src/app/objects/group';

@Component({
  selector: 'wagl-league-menu',
  templateUrl: './league-menu.component.html',
  styleUrls: ['./league-menu.component.scss']
})
export class LeagueMenuComponent implements OnInit  {
  @Input() group: Group; 

  constructor() {}

  ngOnInit() {}

  onMouseDown(leagueMenuTrigger: MatMenuTrigger) {
    // This method can be used for any specific mouse down logic if needed.
      console.log(leagueMenuTrigger.menuOpen);
      leagueMenuTrigger.openMenu();
      console.log(leagueMenuTrigger.menuOpen);
  }
}

if I simply call it like this:

<wagl-league-menu [group]="league"></wagl-league-menu>

It will work, but when I call it like this:

    <wagl-league-menu *ngFor="let league of leagues" [group]="league"></wagl-league-menu>

It does not work, I can't seem to put my finger on what I'm doing wrong. I'm using angular 7.

Answer 1

Here is how I solved my problem:

<ng-container 
    *ngFor="let league of leagues; trackBy: trackList" [attr.id]="league.group_id">
    <wagl-league-menu [group]="league" [attr.id]="'league'+league.group_id"></wagl-league-menu>
</ng-container>

Using trackBy seems to have fixed it.