API for menu

API reference for Angular Material menu

import {MatMenuModule} from '@angular/material/menu';

Selector: mat-menu

Exported as: matMenu
Properties
Name Description
@Input('aria-describedby')

ariaDescribedby: string

aria-describedby for the menu panel.

@Input('aria-label')

ariaLabel: string

aria-label for the menu panel.

@Input('aria-labelledby')

ariaLabelledby: string

aria-labelledby for the menu panel.

@Input()

backdropClass: string

Class to be added to the backdrop element.

@Input({ transform: (value: any) => (value == null ? null : booleanAttribute(value)) })

hasBackdrop: boolean

Whether the menu has a backdrop.

@Input({ transform: booleanAttribute })

overlapTrigger: boolean

Whether the menu should overlap its trigger.

@Input('class')

panelClass: string

This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.

@Input()

xPosition: MenuPositionX

Position of the menu in the X axis.

@Input()

yPosition: MenuPositionY

Position of the menu in the Y axis.

@Output()

closed: EventEmitter<MenuCloseReason>

Event emitted when the menu is closed.

direction: Direction

Layout direction of the menu.

overlayPanelClass: string | string[]

Class or list of classes to be added to the overlay panel.

panelId: string

parentMenu: MatMenuPanel | undefined

Parent menu of the current menu panel.

@Input()
Deprecated

classList: string

This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.

@Output()
Deprecated

close: EventEmitter<MenuCloseReason>

Event emitted when the menu is closed.

Deprecated

items: QueryList<MatMenuItem>

List of the items inside of a menu.

Methods
addItem
Parameters

_item

MatMenuItem

focusFirstItem

Focus the first item in the menu.

Parameters

origin

FocusOrigin = 'program'

Action from which the focus originated. Used to set the correct styling.

resetActiveItem

Resets the active item in the menu. This is used when the menu is opened, allowing the user to start from the first option when pressing the down arrow.

Deprecated
setElevation
Parameters

_depth

number

Directive applied to an element that should trigger a mat-menu.

Selector: [mat-menu-trigger-for] [matMenuTriggerFor]

Exported as: matMenuTrigger
Properties
Name Description
@Input('matMenuTriggerFor')

menu: MatMenuPanel | null

References the menu instance that the trigger is associated with.

@Input('matMenuTriggerData')

menuData: any

Data to be passed along to any lazily-rendered content.

@Input('matMenuTriggerRestoreFocus')

restoreFocus: boolean

Whether focus should be restored when the menu is closed. Note that disabling this option can have accessibility implications and it's up to you to manage focus, if you decide to turn it off.

@Output()

menuClosed: EventEmitter<void>

Event emitted when the associated menu is closed.

@Output()

menuOpened: EventEmitter<void>

Event emitted when the associated menu is opened.

dir: Direction

The text direction of the containing app.

menuOpen: boolean

Whether the menu is open.

@Output()
Deprecated

onMenuClose: EventEmitter<void>

Event emitted when the associated menu is closed.

@Output()
Deprecated

onMenuOpen: EventEmitter<void>

Event emitted when the associated menu is opened.

Methods
closeMenu

Closes the menu.

focus

Focuses the menu trigger.

Parameters

origin?

FocusOrigin

Source of the menu trigger's focus.

options?

FocusOptions

openMenu

Opens the menu.

toggleMenu

Toggles the menu between the open and closed states.

triggersSubmenu

Whether the menu triggers a sub-menu or a top-level one.

Returns
boolean

updatePosition

Updates the position of the menu to ensure that it fits all options within the viewport.

Single item inside a mat-menu. Provides the menu item styling and accessibility treatment.

Selector: [mat-menu-item]

Exported as: matMenuItem
Properties
Name Description
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether ripples are disabled on the menu item.

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the menu item is disabled.

@Input()

role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox'

ARIA role for the menu item.

Methods
focus

Focuses the menu item.

Parameters

origin?

FocusOrigin

options?

FocusOptions

getLabel

Gets the label to be used when determining whether the option should be focused.

Returns
string

Menu content that will be rendered lazily once the menu is opened.

Selector: ng-template[matMenuContent]

Default mat-menu options that can be overridden.

Properties
Name Description

backdropClass: string

Class to be applied to the menu's backdrop.

hasBackdrop: boolean

Whether the menu has a backdrop.

overlapTrigger: boolean

Whether the menu should overlap the menu trigger.

overlayPanelClass: string | string[]

Class or list of classes to be applied to the menu's overlay panel.

xPosition: MenuPositionX

The x-axis position of the menu.

yPosition: MenuPositionY

The y-axis position of the menu.

Reason why the menu was closed.

type MenuCloseReason = void | 'click' | 'keydown' | 'tab';
type MenuPositionX = 'before' | 'after';
type MenuPositionY = 'above' | 'below';

Injection token to be used to override the default options for mat-menu.

const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;

Injection token that determines the scroll handling while the menu is open.

const MAT_MENU_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
Deprecated

Default top padding of the menu panel.

const MENU_PANEL_TOP_PADDING: 8;

Injection token that can be used to reference instances of MatMenuContent. It serves as alternative token to the actual MatMenuContent class which could cause unnecessary retention of the class and its directive metadata.

const MAT_MENU_CONTENT: InjectionToken<MatMenuContent>;

API reference for Angular Material menu-testing

import {MatMenuHarness} from '@angular/material/menu/testing';

Harness for interacting with a mat-menu in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-menu-trigger'

The selector for the host element of a MatMenu instance.

Methods
async
blur

Blurs the menu.

Returns
Promise<void>

Promise that resolves when the action completes.

async
clickItem

Clicks an item in the menu, and optionally continues clicking items in subsequent sub-menus.

Parameters

itemFilter

Omit<MenuItemHarnessFilters, "ancestor">

A filter used to represent which item in the menu should be clicked. The first matching menu item will be clicked.

subItemFilters

A list of filters representing the items to click in any subsequent sub-menus. The first item in the sub-menu matching the corresponding filter in subItemFilters will be clicked.

...subItemFilters

Omit<MenuItemHarnessFilters, "ancestor">[]

Returns
Promise<void>

Promise that resolves when the action completes.

async
close

Closes the menu.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the menu.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getAllChildLoaders
Parameters

selector

S

Returns
Promise<HarnessLoader[]>

async
getAllHarnesses
Parameters

query

HarnessQuery<T>

Returns
Promise<T[]>

async
getChildLoader
Parameters

selector

S

Returns
Promise<HarnessLoader>

async
getHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<T>

async
getHarnessOrNull
Parameters

query

HarnessQuery<T>

Returns
Promise<T | null>

async
getItems

Gets a list of MatMenuItemHarness representing the items in the menu.

Parameters

filters?

Omit<MenuItemHarnessFilters, "ancestor">

Optionally filters which menu items are included.

Returns
Promise<MatMenuItemHarness[]>

async
getRootHarnessLoader
Returns
Promise<HarnessLoader>

async
getTriggerText

Gets the text of the menu's trigger element.

Returns
Promise<string>

async
hasHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the menu is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the menu is focused.

Returns
Promise<boolean>

async
isOpen

Whether the menu is open.

Returns
Promise<boolean>

async
open

Opens the menu.

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a menu with specific attributes.

Parameters

options

MenuHarnessFilters = {}

Options for filtering which menu instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

Properties
Name Description

static hostSelector: '.mat-mdc-menu-item'

The selector for the host element of a MatMenuItem instance.

Methods
async
blur

Blurs the menu item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
click

Clicks the menu item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the menu item.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getAllChildLoaders
Parameters

selector

S

Returns
Promise<HarnessLoader[]>

async
getAllHarnesses
Parameters

query

HarnessQuery<T>

Returns
Promise<T[]>

async
getChildLoader
Parameters

selector

S

Returns
Promise<HarnessLoader>

async
getHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<T>

async
getHarnessOrNull
Parameters

query

HarnessQuery<T>

Returns
Promise<T | null>

async
getSubmenu

Gets the submenu associated with this menu item, or null if none.

Returns
Promise<MatMenuHarness | null>

async
getText

Gets the text of the menu item.

Returns
Promise<string>

async
hasHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<boolean>

async
hasSubmenu

Whether this item has a submenu.

Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the menu is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the menu item is focused.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a menu item with specific attributes.

Parameters

options

MenuItemHarnessFilters = {}

Options for filtering which menu item instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatMenuHarness instances.

Properties
Name Description

triggerText: string | RegExp

Only find instances whose trigger text matches the given value.

A set of criteria that can be used to filter a list of MatMenuItemHarness instances.

Properties
Name Description

hasSubmenu: boolean

Only find instances that have a sub-menu.

text: string | RegExp

Only find instances whose text matches the given value.

Azure & Blue theme selected.