Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the different Direction properties I can use on an Angular Material Menu Component?

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?

like image 620
John Avatar asked Nov 29 '18 13:11

John


People also ask

Which angular material elements can be used to construct a menu?

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.

How to change the position of mat menu?

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.

What is mat menu item?

<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.


2 Answers

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.

like image 52
G. Tranter Avatar answered Jan 01 '23 12:01

G. Tranter


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

    • The position of the menu in the Y/vertical axis
    • Valid values: 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

    • The position of the menu in the X/horizontal axis
    • Valid values: 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.

like image 35
Edric Avatar answered Jan 01 '23 12:01

Edric