feat(Menu): Programmatically open/close menu
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Feature Description
**feat(Menu): Programmatically open/close menu**
When the menu is clicked, it opens right away.
I want to handle the click event and programmatically open the menu after doing another operation.
My workaround at present:
```html
List Data
@for (item of data; track item)
{
{{ item.text }}
}
```
```typescript
@ViewChild('dataMenuBtn', { read: ViewContainerRef })
private readonly dataMenuBtnViewContainerRef!: ViewContainerRef;
@ViewChild('dataMenuBtn', { read: ElementRef })
private readonly dataMenuBtnElementRef!: ElementRef;
private dataMenuTrigger!: MatMenuTrigger;
protected data: { text: string }[] = [];
protected async listData(dataMenu: MatMenu, $event: MouseEvent): Promise
{
const menuTrigger = this.dataMenuTrigger ?? (this.dataMenuTrigger = runInInjectionContext(Injector.create({
providers: [
{
provide: ElementRef,
useValue: this.dataMenuBtnElementRef
},
{
provide: ViewContainerRef,
useValue: this.dataMenuBtnViewContainerRef
}
],
parent: this.injector // `Injector` via DI.
}), () => new MatMenuTrigger()));
menuTrigger.menu = dataMenu;
const result = await fetch(`/api/...`);
this.data = await result.json() as typeof this.data;
menuTrigger.openMenu();
}
```
### Use Case
Load data inside menu on click
Contributor guide
Research direction
Start by reading the Angular Material MatMenu and MatMenuTrigger entry points, especially the existing openMenu() behavior and how the trigger is associated with a menu. Determine how a supported trigger can open or close the menu after an asynchronous operation, rather than relying on the shown manual construction. Done means callers can load data on click and then programmatically open or close the menu through the public API.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100