angular / angular/components

feat(CdkMenu/CdkContextMenuTriggerFor): Allow CdkMenu to be programmatically opened/closed

Open
#29,072 0 comments 1 reaction 0 assignees View on GitHub
area: cdk/menu feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

## Feature Description

### Current Behaviour

The directive `CdkMenu` is used with combination of `CdkContextMenuTriggerFor`. When user right-clicks (context-menu event), the menu gets opened and clicking on outside of the menu will close the menu.

### New Feature Requested

It would be great if user can manually/programmatically open/close the menu. And also disable closing the menu clicking outside.

#### Possible Solutions

1. Add a boolean input property `cdkContextMenuDisableCloseOnOutsideClick` - This will disable closing the `CdkMenu` on outside click
2. Add an event emitter property `cdkContextMenuTriggered` - This will emit everytime user right-clicks (context-menu event) with the coordinates
3. Add an event emitter property `cdkContextMenuClickedOutside` - This will emit everytime user clicks outside of the `CdkMenu`

### Use Case

This will allow users to handle animations with `CdkMenu` if they want to apply on open/close.

Contributor guide

Open the contributing guide

Research direction

Start by reading the CdkMenu and CdkContextMenuTriggerFor directive entry points and tracing the existing context-menu opening and outside-click closing behavior. Clarify the public API and event semantics for programmatic open/close, disabling outside-click closure, and context-menu/outside-click notifications. Done means the agreed behavior is implemented and covered by the relevant menu tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.