import {MatMenuModule} from '@angular/material/menu';
MatMenu
Selector: mat-menu
Exported as: matMenuName | Description |
---|---|
@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. |
| 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. |
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
This directive is intended to be used inside an mat-menu tag. It exists mostly to set the role attribute.
Selector: [mat-menu-item]
Exported as: matMenuItemName | Description |
---|---|
@Input()
| Whether ripples are disabled. |
@Input()
| Whether the component is disabled. |
focus | |
---|---|
Focuses the menu item. | |
Parameters | |
origin FocusOrigin = 'program' |
getLabel | |
---|---|
Gets the label to be used when determining whether the option should be focused. | |
Returns | |
string |
MatMenuTrigger
This directive is intended to be used in conjunction with an mat-menu tag. It is responsible for toggling the display of the provided menu instance.
Selector: [mat-menu-trigger-for] [matMenuTriggerFor]
Exported as: matMenuTriggerName | 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. |
@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. |
closeMenu | |
---|---|
Closes the menu. |
focus | |
---|---|
Focuses the menu trigger. | |
Parameters | |
origin FocusOrigin = 'program' | Source of the menu trigger's focus. |
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.
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. |
| The x-axis position of the menu. |
| The y-axis position of the menu. |
MenuPositionX
Type: 'before' | 'after'
MenuPositionY
Type: 'above' | 'below'