From the Angular Material Documentation I can use a direction
attribute on a Menu Component:
direction: Direction
: Layout direction of the menu.
This means that there is a type, Direction
, but I am not able to find it, and do not know how to use it on a menu component.
I have tried the following, but I am not sure which values I can put inside the direction
-attribute. I thought I could use something like Direction.UP
or Direction.DOWN
, but I am not able to find the Direction
class in my project. Is there a hidden place to import it from?
<button mat-raised-button type="button" [matMenuTriggerFor]="saveBtn" color="primary">Ny rad</button>
<mat-menu #saveBtn="matMenu" [direction]="'up'"> <!-- Here I am using [direction], but do not know what to put as a value there, that is of type Direction -->
<button mat-menu-item (click)="save('1')">Save 1</button>
<button mat-menu-item (click)="save('2')">Save 2</button>
</mat-menu>
EDIT
After searching for a while longer, I found that I could use the values 'ltr'
and 'rtl'
, and I had to use it on an element that uses the matMenuTriggerFor
- selector.
After declaring a variable with the type Direction
in Visual Studio Code, it suggested me to import { Direction } from '@angular/cdk/bidi';
, and that type looked like this:
export declare type Direction = 'ltr' | 'rtl';
Even though I found this, I am getting an error stating that
Template parse errors: Can't bind to 'direction' since it isn't a known property of 'mat-menu'.
when I try to use the direction
attribute on the mat-menu
-element, even though the documentation says I can use a direction attribute. Am I doing something wrong?
The <mat-menu>, an Angular Directive, is used to create a menu and attach it with a control with material design styling and animation capabilities.
Changing mat menu positionThe xPosition attribute sets the menu all along the horizontal axis. The yPosition attribute is used to change the menu's vertical position. Set the yPosition property to "above" to display the menu just above the menu trigger element. The values "above" and "below" are accepted by yPosition.
<mat-menu> is a temporary panel containing a list of options. It is used to create menus and engage with controls along with content design, styling, and animation capabilities.
The Direction
type is part of the Bi-directionality API in Angular CDK library. Like any other feature, you need to import its module into your application (e.g. app.module.ts) in order to use it:
import {BidiModule} from '@angular/cdk/bidi';
More details are in the API docs.
You're probably looking for a way to customize the position of the menu.
If so, you can use the yPosition
and/or xPosition
attributes to change where the menu shows.
Here's what the attributes represent:
yPosition
above
| below
Example:
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>more_vert</mat-icon>
</button>
<!-- Shows the menu above the button/trigger -->
<mat-menu yPosition="above" #appMenu="matMenu">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Log out</button>
</mat-menu>
xPosition
before
| after
Example:
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>more_vert</mat-icon>
</button>
<!-- Shows the menu before the button/trigger -->
<mat-menu xPosition="before" #appMenu="matMenu">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Log out</button>
</mat-menu>
For more information, check out the docs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With