API reference for Angular Material menu
import {MatMenuModule} from '@angular/material/menu';
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()
|
Whether the menu has a backdrop. |
@Input()
|
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. |
| setElevation | |
|---|---|
|
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: matMenuItemProperties
| Name | Description |
|---|---|
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the component is disabled. |
@Input()
|
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: 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 = '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]
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. |
MenuPositionX
type MenuPositionX = 'before' | 'after';
MenuPositionY
type MenuPositionY = 'above' | 'below';
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>;