[FR] afterClosed for MatMenuTrigger and MatMenu
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Bug, feature request, or proposal:
feature request
#### What is the expected behavior?
I want to be able to detect when a menu is completely closed (after the animation is done)
#### What is the current behavior?
there is a `menuClosed` event that is called when menu is about to be clsoed
#### What is the use-case or motivation for changing an existing behavior?
After menu item selected, I want to update a service the affects the displayed menu panel. Current menuClosed is too early, and it will cause the panel to reflect the change during the close animation.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
angular 6.0.6, material 6.3.0
#### Is there anything else we should know?
workarounds:
1. ```js
onMenuClosed() {setTimeout(() => { /* doing stuff */ }, 500);}
1. ```js
@ViewChild(MatMenu) myMenu: MatMenu;
// ...
onMenuClosed() {
this.myMenu._animationDone
.pipe(filter(event => event.toState === 'void'), take(1))
.subscribe(() => {
/* doing stuff */
});
}
Contributor guide
Research direction
Start by reading the MatMenuTrigger and MatMenu event lifecycle, especially the existing menuClosed event and the referenced _animationDone stream. Confirm when the close animation completes and define the public afterClosed behavior for both components. Done means consumers can react after the menu is fully closed without relying on a timeout or private API.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100