API reference for Angular Material menu
import {MatMenuModule} from '@angular/material/menu';
Directives
MatMenu
Selector: mat-menu
Exported as: matMenuProperties
Name | Description |
---|---|
@Input('aria-describedby')
|
aria-describedby for the menu panel. |
@Input('aria-label')
|
aria-label for the menu panel. |
@Input('aria-labelledby')
|
aria-labelledby for the menu panel. |
@Input()
|
Class to be added to the backdrop element. |
@Input({ transform: (value: any) => (value == null ? null : booleanAttribute(value)) })
|
Whether the menu has a backdrop. |
@Input({ transform: booleanAttribute })
|
Whether the menu should overlap its trigger. |
@Input('class')
|
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()
|
Position of the menu in the X axis. |
@Input()
|
Position of the menu in the Y axis. |
@Output()
|
Event emitted when the menu is closed. |
|
Layout direction of the menu. |
|
Class or list of classes to be added to the overlay panel. |
|
|
|
Parent menu of the current menu panel. |
@Input()
Deprecated
|
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
|
Event emitted when the menu is closed. |
Deprecated
|
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
|
|
MatMenuTrigger
Directive applied to an element that should trigger a mat-menu
.
Selector: [mat-menu-trigger-for] [matMenuTriggerFor]
Exported as: matMenuTriggerProperties
Name | Description |
---|---|
@Input('matMenuTriggerFor')
|
References the menu instance that the trigger is associated with. |
@Input('matMenuTriggerData')
|
Data to be passed along to any lazily-rendered content. |
@Input('matMenuTriggerRestoreFocus')
|
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()
|
Event emitted when the associated menu is closed. |
@Output()
|
Event emitted when the associated menu is opened. |
|
The text direction of the containing app. |
|
Whether the menu is open. |
@Output()
Deprecated
|
Event emitted when the associated menu is closed. |
@Output()
Deprecated
|
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. |
MatMenuItem
Single item inside a mat-menu
. Provides the menu item styling and accessibility treatment.
Selector: [mat-menu-item]
Exported as: matMenuItemProperties
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether ripples are disabled on the menu item. |
@Input({ transform: booleanAttribute })
|
Whether the menu item is disabled. |
@Input()
|
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
|
|
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 |
---|---|
|
Class to be applied to the menu's backdrop. |
|
Whether the menu has a backdrop. |
|
Whether the menu should overlap the menu trigger. |
|
Class or list of classes to be applied to the menu's overlay panel. |
|
The x-axis position of the menu. |
|
The y-axis position of the menu. |
Type aliases
MenuCloseReason
Reason why the menu was closed.
type MenuCloseReason = void | 'click' | 'keydown' | 'tab';
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>;
MENU_PANEL_TOP_PADDING
Default top padding of the menu panel.
const MENU_PANEL_TOP_PADDING: 8;
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
ContentContainerComponentHarness
Harness for interacting with a mat-menu in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
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 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 |
|
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 |
|
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 |
|
Parameters | |
options MenuHarnessFilters = {}
|
Options for filtering which menu instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
MatMenuItemHarness
extends
ContentContainerComponentHarness
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
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 |
|
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 |
|
Parameters | |
options MenuItemHarnessFilters = {}
|
Options for filtering which menu item instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
MenuHarnessFilters
A set of criteria that can be used to filter a list of MatMenuHarness
instances.
Properties
Name | Description |
---|---|
|
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 |
---|---|
|
Only find instances that have a sub-menu. |
|
Only find instances whose text matches the given value. |