[mat-menu]: control the arrow position in a nested menu trigger

[shlomiassaf]

Bug, feature request, or proposal: feature

What is the expected behavior?

Developer can define the location of the arrow in a nested menu submenu trigger.

What is the current behavior?

Icon is fixed to left (or right in dir=rtl) and does not take into account to nested menu positioning.

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

When a menu is close to the edge of the viewport, all nested menus will position on the opposite side. A menu on the top right, in LTR direction with a nested menu will create an arrow on the submenu trigger that is on the opposite side of the position of the submenu:

Making the menu RTL makes it worse.

The optional locations should be one of:

• left
• right
• auto

Where left and right are fixed.

auto will instruct the menu (or trigger) to calculate the position (left/right) based on where the submenu will open.

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

angular 5.0.1, material rc0

With the current implementation, this can be achieved with css classes.
It will also require extra padding based on the result (left/right), currently the extra padding is always right (or left in RTL)

@jelbourn If this feature is approved, and if possible, i'd like to implement if/once API is agreed upon.

Thanks.

[shlomiassaf]

see https://angular-material2-issue-4bxtus.stackblitz.io for a dumb-simple alternative.

This example will not take into account the position the submenu will open to nor if there are any submenus at all...

[crisbeto]

This is according to the spec:

Also see #7921 (comment) for a more detailed explanation.

[shlomiassaf]

I agree with your comment but this is still a problem.

The screenshot above is fine but when this is rendering on a trigger that is always on the right of the screen it's weird.

So, auto-setting an icon is out of the question but being able to define left/right for the arrow only in the top-most menu, that should be allowed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}