fix(aria/menu): allow data to be passed to menu

[crisbeto]

Allows users to pass data from the trigger to the menu. This allows for the same menu to be reused with different parameters across triggers.

Fixes #32782.

[ok7sai]

I am a bit hesitant to support context data APIs... for two reasons.

1. It creates multiple triggers to have aria-controls point to the same menu id. It does not cause violation, but it could cause confusion and bad UX, and we won't be able to roll back this easily.
2. If such implementation is still wanted (maybe for performance reason), a workaround is switching the menu data based off which menu trigger is expanded. We could probably provide a menuExpanded output to make this easier.

[crisbeto]

My thinking was mainly that people may want to reuse the same menu across triggers so they don't have to repeat their markup. What was your thinking of achieving that without being able to pass context data?

[ok7sai]

Making the menu data dynamic like

@for (item of collection; track item.id) {
  <button 
    ngMenuTrigger 
    [menu]="formatMenu" 
    (click)="activeItem = item">
    Open Options
  </button>
}

<div ngMenu #formatMenu="ngMenu">
  <ng-template ngMenuContent>
    <div ngMenuItem (click)="markAsRead(activeItem)">
      Mark as read
    </div>
  </ng-template>
</div>

[crisbeto]

That's more or less the same as the context approach, but the context has the benefit of ensuring that the data is defined as the template is initialized whereas with this approach technically you'd need to wait for a change detection cycle before the activeItem becomes available. The other problem is that this only sets the activeItem on click, but it might get out of sync if the menu is opened in a different way (e.g. programmatically).

[ok7sai]

We can provide (menuExpanded)="actionItem = item" to make the menu expansion state clear.

The biggest concern is still the context data API will cause multiple menu triggers have the same aria-controls value which is not encouraged and should be used with caution. To be honest I don't think there's any bad to just repeat the ngMenu since the content is lazily loaded.

@for (item of collection; track item.id) {
  <button ngMenuTrigger [menu]="formatMenu">
    Open Options
  </button>
  <div ngMenu #formatMenu="ngMenu">
    <ng-template ngMenuContent>
      <div ngMenuItem (click)="markAsRead(item)">
        Mark as read
      </div>
    </ng-template>
  </div>
}

This is the designed usage.

[crisbeto]

I'm still not sure that the menuExpanded is better than providing the value through the trigger, but I think moving the menu into the loop is a valid workaround.