Angular Material

API reference for Angular Material menu

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

Directives

`MatMenu`

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() `hasBackdrop: boolean \| undefined`	Whether the menu has a backdrop.
@Input() `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<void \| 'click' \| 'keydown' \| 'tab'>`	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: `mat-menu-panel-${menuPanelUid++}`
`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<void \| 'click' \| 'keydown' \| 'tab'>`	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

focusFirstItem
Focus the first item in the menu.
origin `FocusOrigin = 'program'`	Action from which the focus originated. Used to set the correct styling.

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.

setElevation

setElevation
Sets the menu panel elevation.
depth `number`	Number of parent menus that come before the menu.

Sets the menu panel elevation.

Parameters

depth

number

Number of parent menus that come before the menu.

`MatMenuItem`

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

Selector: [mat-menu-item]

Exported as: matMenuItem

Properties

Name	Description
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `role: 'menuitem' \| 'menuitemradio' \| 'menuitemcheckbox'`	ARIA role for the menu item.

Methods

focus
Focuses the menu item.
Parameters
origin `FocusOrigin = 'program'`
options? `FocusOptions`

getLabel
Gets the label to be used when determining whether the option should be focused.
Returns
`string`

`MatMenuTrigger`

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<any>`	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 = 'program'`	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`

`MatMenuContent`

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

Selector: ng-template[matMenuContent]

Interfaces

`MatMenuDefaultOptions`

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.

Type aliases

`MenuPositionX`

type MenuPositionX = 'before' | 'after';

`MenuPositionY`

type MenuPositionY = 'above' | 'below';

Constants

`MAT_MENU_DEFAULT_OPTIONS`

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

const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;

`MAT_MENU_SCROLL_STRATEGY`

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

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

`MAT_MENU_CONTENT`

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';

Classes

`MatMenuHarness` extends ComponentHarness

Harness for interacting with a standard mat-menu in tests.

Methods

async blur
Blurs the menu.
`Promise<void>`	Promise that resolves when the action completes.

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 `Pick<MenuItemHarnessFilters, "text" \| "selector" \| "hasSubmenu">`	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 `Pick<MenuItemHarnessFilters, "text" \| "selector" \| "hasSubmenu">[]`
Returns
`Promise<void>`	Promise that resolves when the action completes.

async close
Closes the menu.
`Promise<void>`	Promise that resolves when the action completes.

async

Closes the menu.

Returns

Promise<void>

Promise that resolves when the action completes.

async focus
Focuses the menu.
`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 getItems
Gets a list of `MatMenuItemHarness` representing the items in the menu.
Parameters
filters `Pick<MenuItemHarnessFilters, "text" \| "selector" \| "hasSubmenu"> = {}`	Optionally filters which menu items are included.
Returns
`Promise<MatMenuItemHarness[]>`

async getTriggerText
Gets the text of the menu's trigger element.
Returns
`Promise<string>`

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.
`Promise<void>`	Promise that resolves when the action completes.

async

open

Opens the menu.

Returns

Promise<void>

Promise that resolves when the action completes.

`MatMenuItemHarness` extends ComponentHarness

Harness for interacting with a standard mat-menu-item in tests.

Methods

async blur
Blurs the menu item.
`Promise<void>`	Promise that resolves when the action completes.

async

blur

Blurs the menu item.

Returns

Promise<void>

Promise that resolves when the action completes.

async click
Clicks the menu item.
`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.
`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 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 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>`

Interfaces

`MenuHarnessFilters`

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.

`MenuItemHarnessFilters`

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.

Testing

API reference for Angular Material menu

link Directives

link MatMenu

Properties

Methods

link MatMenuItem

Properties

Methods

link MatMenuTrigger

Properties

Methods

link MatMenuContent

link Interfaces

link MatMenuDefaultOptions

Properties

link Type aliases

link MenuPositionX

link MenuPositionY

link Constants

link MAT_MENU_DEFAULT_OPTIONS

link MAT_MENU_SCROLL_STRATEGY

link MAT_MENU_CONTENT

API reference for Angular Material menu-testing

link Classes

link MatMenuHarness extends ComponentHarness

Methods

link MatMenuItemHarness extends ComponentHarness

Methods

link Interfaces

link MenuHarnessFilters

Properties

link MenuItemHarnessFilters

Properties

Directives

`MatMenu`

`MatMenuItem`

`MatMenuTrigger`

`MatMenuContent`

Interfaces

`MatMenuDefaultOptions`

Type aliases

`MenuPositionX`

`MenuPositionY`

Constants

`MAT_MENU_DEFAULT_OPTIONS`

`MAT_MENU_SCROLL_STRATEGY`

`MAT_MENU_CONTENT`

Classes

`MatMenuHarness` extends ComponentHarness

`MatMenuItemHarness` extends ComponentHarness

Interfaces

`MenuHarnessFilters`

`MenuItemHarnessFilters`