angular / angular/components

[FR] afterClosed for MatMenuTrigger and MatMenu

Open
#11,929 4 comments 4 reactions 0 assignees View on GitHub
area: material/menu feature P4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.