Skip to content

Set menu position with binding #1329

Closed
Closed
@ashleahhill

Description

@ashleahhill

Bug, feature request, or proposal:

Feature Request

What is the -expected- desired behavior?

To be able to bind values to the x-position and y-position inputs of the md-menu.

What is the current behavior?

I can't set the x-position or y-position by binding to a value

Changing MyMenu's template to include this

<md-menu x-position="{{before}}" y-position="{{after}}" #menu="mdMenu">

Causes a template parse error, (because x-position and y-position are attributes, not inputs?).

Can't bind to 'y-position' since it isn't a known property of 'md-menu'.
1. If 'md-menu' is an Angular component and it has 'y-position' input, then verify that it is part of this module.
2. If 'md-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

What are the steps to reproduce?

Can't get plunker to work with md-menu at the moment.

What is the use-case or motivation for changing an existing behavior?

For example, I want create a component that lets me drop in a menu with a list of items with custom behaviors already attached. Its template is basically this:

<button [md-menu-trigger-for]="menu">
Open Menu
</button>

<md-menu x-position="before" y-position="after" #menu="mdMenu">
    <button md-menu-item
      *ngFor="let item of menuItems"
      [item]="item"
      (action)="action(item)">
{{item.name}}
    </button>
</md-menu>

Sometimes, I am going to use these menus in a context where I have space on the left, or space on the right, or space above, ect. I want to be able to set in the x-position and y-position in the parent component and have it set on the menu.

<md-toolbar>
<span flex></span>
<my-menu [x-position]="before" [menu-items]="menuItemList">
</my-menu>
</md-toolbar>

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.0.0
Material 8-2

Is there anything else we should know?

Metadata

Metadata

Assignees

Labels

featureThis issue represents a new feature or feature request rather than a bug or bug fixneeds: discussionFurther discussion with the team is needed before proceeding

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions