Angular Material - hide menu on button's mouseleave
I got menu that is being displayed on mouseenter
event of a button. All that in toolbar:
<mat-toolbar color="primary">
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="matMenu1Trigger.openMenu()">Menu1
</button>
<mat-menu #menu1="matMenu">
<div (mouseleave)="matMenu1Trigger.closeMenu()">
<button mat-menu-item>Item 1</button>
</div>
</mat-menu>
</mat-toolbar>
The menu is closed when mouseleave
event of surrounding span, so far so good.
Now I want to close the menu on mouseleave
of the triggering button as well by adding
(mouseleave)="matMenu1Trigger.closeMenu()"
When I do this and move mouse over this button, menu starts to flicker, like its being opened/closed every few miliseconds.
Why is that and how to hide the menu when mouse leaves the button?
https://stackblitz.com/edit/angular-kd8bue
Edit: After some googling I found out this behavior is caused by an overlay being displayed when the menu is opened as described here How to open mat-menu on a single click and close other opened menu if there is any?. Not sure if what I would like to achieve is even possible because of the overlay...
javascript html angular angular-material
add a comment |
I got menu that is being displayed on mouseenter
event of a button. All that in toolbar:
<mat-toolbar color="primary">
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="matMenu1Trigger.openMenu()">Menu1
</button>
<mat-menu #menu1="matMenu">
<div (mouseleave)="matMenu1Trigger.closeMenu()">
<button mat-menu-item>Item 1</button>
</div>
</mat-menu>
</mat-toolbar>
The menu is closed when mouseleave
event of surrounding span, so far so good.
Now I want to close the menu on mouseleave
of the triggering button as well by adding
(mouseleave)="matMenu1Trigger.closeMenu()"
When I do this and move mouse over this button, menu starts to flicker, like its being opened/closed every few miliseconds.
Why is that and how to hide the menu when mouse leaves the button?
https://stackblitz.com/edit/angular-kd8bue
Edit: After some googling I found out this behavior is caused by an overlay being displayed when the menu is opened as described here How to open mat-menu on a single click and close other opened menu if there is any?. Not sure if what I would like to achieve is even possible because of the overlay...
javascript html angular angular-material
Do you want to try this withcss
instead ofjavascript
?
– Bagherani
Nov 21 '18 at 9:46
Try to bind menu'sopened
value to a component typescript variable instead and to change that value from the event.. Like: (HTML)<mat-menu #menu1="matMenu" [opened]="varOpened">
(TYPESCRIPT):var varOpened: boolean = false;
(HTML):<div (mouseleave)="closeMenu()">
(TYPESCRIPT):closeMenu(){ this.varOpened=false; }
. I don't have tested but I always acted like this way before with Angular Material's stuff so... let me know if it works!
– Deadpool
Nov 21 '18 at 9:52
@Deadpool: There is no such property asopened
, see material.angular.io/components/menu/api
– user1622058
Nov 21 '18 at 15:54
add a comment |
I got menu that is being displayed on mouseenter
event of a button. All that in toolbar:
<mat-toolbar color="primary">
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="matMenu1Trigger.openMenu()">Menu1
</button>
<mat-menu #menu1="matMenu">
<div (mouseleave)="matMenu1Trigger.closeMenu()">
<button mat-menu-item>Item 1</button>
</div>
</mat-menu>
</mat-toolbar>
The menu is closed when mouseleave
event of surrounding span, so far so good.
Now I want to close the menu on mouseleave
of the triggering button as well by adding
(mouseleave)="matMenu1Trigger.closeMenu()"
When I do this and move mouse over this button, menu starts to flicker, like its being opened/closed every few miliseconds.
Why is that and how to hide the menu when mouse leaves the button?
https://stackblitz.com/edit/angular-kd8bue
Edit: After some googling I found out this behavior is caused by an overlay being displayed when the menu is opened as described here How to open mat-menu on a single click and close other opened menu if there is any?. Not sure if what I would like to achieve is even possible because of the overlay...
javascript html angular angular-material
I got menu that is being displayed on mouseenter
event of a button. All that in toolbar:
<mat-toolbar color="primary">
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="matMenu1Trigger.openMenu()">Menu1
</button>
<mat-menu #menu1="matMenu">
<div (mouseleave)="matMenu1Trigger.closeMenu()">
<button mat-menu-item>Item 1</button>
</div>
</mat-menu>
</mat-toolbar>
The menu is closed when mouseleave
event of surrounding span, so far so good.
Now I want to close the menu on mouseleave
of the triggering button as well by adding
(mouseleave)="matMenu1Trigger.closeMenu()"
When I do this and move mouse over this button, menu starts to flicker, like its being opened/closed every few miliseconds.
Why is that and how to hide the menu when mouse leaves the button?
https://stackblitz.com/edit/angular-kd8bue
Edit: After some googling I found out this behavior is caused by an overlay being displayed when the menu is opened as described here How to open mat-menu on a single click and close other opened menu if there is any?. Not sure if what I would like to achieve is even possible because of the overlay...
javascript html angular angular-material
javascript html angular angular-material
edited Nov 21 '18 at 16:44
user1622058
asked Nov 21 '18 at 9:31
user1622058user1622058
1631312
1631312
Do you want to try this withcss
instead ofjavascript
?
– Bagherani
Nov 21 '18 at 9:46
Try to bind menu'sopened
value to a component typescript variable instead and to change that value from the event.. Like: (HTML)<mat-menu #menu1="matMenu" [opened]="varOpened">
(TYPESCRIPT):var varOpened: boolean = false;
(HTML):<div (mouseleave)="closeMenu()">
(TYPESCRIPT):closeMenu(){ this.varOpened=false; }
. I don't have tested but I always acted like this way before with Angular Material's stuff so... let me know if it works!
– Deadpool
Nov 21 '18 at 9:52
@Deadpool: There is no such property asopened
, see material.angular.io/components/menu/api
– user1622058
Nov 21 '18 at 15:54
add a comment |
Do you want to try this withcss
instead ofjavascript
?
– Bagherani
Nov 21 '18 at 9:46
Try to bind menu'sopened
value to a component typescript variable instead and to change that value from the event.. Like: (HTML)<mat-menu #menu1="matMenu" [opened]="varOpened">
(TYPESCRIPT):var varOpened: boolean = false;
(HTML):<div (mouseleave)="closeMenu()">
(TYPESCRIPT):closeMenu(){ this.varOpened=false; }
. I don't have tested but I always acted like this way before with Angular Material's stuff so... let me know if it works!
– Deadpool
Nov 21 '18 at 9:52
@Deadpool: There is no such property asopened
, see material.angular.io/components/menu/api
– user1622058
Nov 21 '18 at 15:54
Do you want to try this with
css
instead of javascript
?– Bagherani
Nov 21 '18 at 9:46
Do you want to try this with
css
instead of javascript
?– Bagherani
Nov 21 '18 at 9:46
Try to bind menu's
opened
value to a component typescript variable instead and to change that value from the event.. Like: (HTML) <mat-menu #menu1="matMenu" [opened]="varOpened">
(TYPESCRIPT): var varOpened: boolean = false;
(HTML): <div (mouseleave)="closeMenu()">
(TYPESCRIPT):closeMenu(){ this.varOpened=false; }
. I don't have tested but I always acted like this way before with Angular Material's stuff so... let me know if it works!– Deadpool
Nov 21 '18 at 9:52
Try to bind menu's
opened
value to a component typescript variable instead and to change that value from the event.. Like: (HTML) <mat-menu #menu1="matMenu" [opened]="varOpened">
(TYPESCRIPT): var varOpened: boolean = false;
(HTML): <div (mouseleave)="closeMenu()">
(TYPESCRIPT):closeMenu(){ this.varOpened=false; }
. I don't have tested but I always acted like this way before with Angular Material's stuff so... let me know if it works!– Deadpool
Nov 21 '18 at 9:52
@Deadpool: There is no such property as
opened
, see material.angular.io/components/menu/api– user1622058
Nov 21 '18 at 15:54
@Deadpool: There is no such property as
opened
, see material.angular.io/components/menu/api– user1622058
Nov 21 '18 at 15:54
add a comment |
2 Answers
2
active
oldest
votes
Please review this closed issue on github
https://github.com/angular/material2/issues/10378#issuecomment-372626596
When your mouseenter
opens the mat-menu
... a cdkOverlay is created and focus set to the mat-menu cdkOverlay
, this immediately fires your mouseleave
event because the focus is now on the overlay and not your button... even though your mouse is still over the button.
Revision
Please review the below stackblitz I did for this SO answer.
How to open and close Angular mat menu on hover
https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
add a comment |
<mat-toolbar color="primary">
<button mat-button >Menu0 </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="buttonenter()"
(mouseout)="buttonleave()" style=" z-index: 50000">Menu1
</button>
<mat-menu #menu1="matMenu" >
<div (mouseleave)="matMenu1Trigger.closeMenu()"
(mouseenter)="menuenter()"
>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
<button mat-menu-item>Item 5</button>
<button mat-menu-item>Item 6</button>
</div>
</mat-menu>
<button mat-button >MenuX </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu2"
#matMenu1Trigger2="matMenuTrigger"
(mouseenter)="buttonenter2()"
(mouseout)="buttonleave2()" style=" z-index: 50000">Menu2
</button>
<mat-menu #menu2="matMenu" >
<div (mouseleave)="matMenu1Trigger2.closeMenu()"
(mouseenter)="menuenter2()"
>
<button mat-menu-item>Item2 1</button>
<button mat-menu-item>Item2 2</button>
<button mat-menu-item>Item2 3</button>
<button mat-menu-item>Item2 4</button>
<button mat-menu-item>Item2 5</button>
<button mat-menu-item>Item2 6</button>
</div>
</mat-menu>
<button mat-button >Menu3 </button>
<button mat-button >Menu4 </button>
<button mat-button >Menu5 </button>
<button mat-button >Menu6 </button>
</mat-toolbar>
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
isEnterMatMenuOpen = false;
@ViewChild('matMenu1Trigger') _matMenu1Trigger
@ViewChild('menuButton') _menuButton
isEnterMatMenuOpen2 = false;
@ViewChild('matMenu1Trigger2') _matMenu1Trigger2
@ViewChild('menuButton2') _menuButton2
buttonenter() {
this._matMenu1Trigger.openMenu();
this.isEnterMatMenuOpen = false;
}
menuenter() {
this.isEnterMatMenuOpen = true;
}
buttonleave() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen ) this._matMenu1Trigger.closeMenu();
}, 50);
}
buttonenter2() {
this._matMenu1Trigger2.openMenu();
this.isEnterMatMenuOpen2 = false;
}
menuenter2() {
this.isEnterMatMenuOpen2 = true;
}
buttonleave2() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen2 ) this._matMenu1Trigger2.closeMenu();
}, 50);
}
}
1
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408953%2fangular-material-hide-menu-on-buttons-mouseleave%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Please review this closed issue on github
https://github.com/angular/material2/issues/10378#issuecomment-372626596
When your mouseenter
opens the mat-menu
... a cdkOverlay is created and focus set to the mat-menu cdkOverlay
, this immediately fires your mouseleave
event because the focus is now on the overlay and not your button... even though your mouse is still over the button.
Revision
Please review the below stackblitz I did for this SO answer.
How to open and close Angular mat menu on hover
https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
add a comment |
Please review this closed issue on github
https://github.com/angular/material2/issues/10378#issuecomment-372626596
When your mouseenter
opens the mat-menu
... a cdkOverlay is created and focus set to the mat-menu cdkOverlay
, this immediately fires your mouseleave
event because the focus is now on the overlay and not your button... even though your mouse is still over the button.
Revision
Please review the below stackblitz I did for this SO answer.
How to open and close Angular mat menu on hover
https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
add a comment |
Please review this closed issue on github
https://github.com/angular/material2/issues/10378#issuecomment-372626596
When your mouseenter
opens the mat-menu
... a cdkOverlay is created and focus set to the mat-menu cdkOverlay
, this immediately fires your mouseleave
event because the focus is now on the overlay and not your button... even though your mouse is still over the button.
Revision
Please review the below stackblitz I did for this SO answer.
How to open and close Angular mat menu on hover
https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html
Please review this closed issue on github
https://github.com/angular/material2/issues/10378#issuecomment-372626596
When your mouseenter
opens the mat-menu
... a cdkOverlay is created and focus set to the mat-menu cdkOverlay
, this immediately fires your mouseleave
event because the focus is now on the overlay and not your button... even though your mouse is still over the button.
Revision
Please review the below stackblitz I did for this SO answer.
How to open and close Angular mat menu on hover
https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html
edited Dec 4 '18 at 18:27
answered Nov 21 '18 at 15:21
MarshalMarshal
2,9822418
2,9822418
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
add a comment |
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
Thanks for explanation, that's what I was looking for, understand why is this happening. The workaround, yeah, not really but thanks anyway.
– user1622058
Nov 22 '18 at 10:06
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
please see revision for new workaround.
– Marshal
Dec 4 '18 at 18:27
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
great job! It's just pity that such an elementary functionality isn't build in. Maybe using third-party component?
– user1622058
Dec 5 '18 at 21:09
add a comment |
<mat-toolbar color="primary">
<button mat-button >Menu0 </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="buttonenter()"
(mouseout)="buttonleave()" style=" z-index: 50000">Menu1
</button>
<mat-menu #menu1="matMenu" >
<div (mouseleave)="matMenu1Trigger.closeMenu()"
(mouseenter)="menuenter()"
>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
<button mat-menu-item>Item 5</button>
<button mat-menu-item>Item 6</button>
</div>
</mat-menu>
<button mat-button >MenuX </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu2"
#matMenu1Trigger2="matMenuTrigger"
(mouseenter)="buttonenter2()"
(mouseout)="buttonleave2()" style=" z-index: 50000">Menu2
</button>
<mat-menu #menu2="matMenu" >
<div (mouseleave)="matMenu1Trigger2.closeMenu()"
(mouseenter)="menuenter2()"
>
<button mat-menu-item>Item2 1</button>
<button mat-menu-item>Item2 2</button>
<button mat-menu-item>Item2 3</button>
<button mat-menu-item>Item2 4</button>
<button mat-menu-item>Item2 5</button>
<button mat-menu-item>Item2 6</button>
</div>
</mat-menu>
<button mat-button >Menu3 </button>
<button mat-button >Menu4 </button>
<button mat-button >Menu5 </button>
<button mat-button >Menu6 </button>
</mat-toolbar>
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
isEnterMatMenuOpen = false;
@ViewChild('matMenu1Trigger') _matMenu1Trigger
@ViewChild('menuButton') _menuButton
isEnterMatMenuOpen2 = false;
@ViewChild('matMenu1Trigger2') _matMenu1Trigger2
@ViewChild('menuButton2') _menuButton2
buttonenter() {
this._matMenu1Trigger.openMenu();
this.isEnterMatMenuOpen = false;
}
menuenter() {
this.isEnterMatMenuOpen = true;
}
buttonleave() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen ) this._matMenu1Trigger.closeMenu();
}, 50);
}
buttonenter2() {
this._matMenu1Trigger2.openMenu();
this.isEnterMatMenuOpen2 = false;
}
menuenter2() {
this.isEnterMatMenuOpen2 = true;
}
buttonleave2() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen2 ) this._matMenu1Trigger2.closeMenu();
}, 50);
}
}
1
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
add a comment |
<mat-toolbar color="primary">
<button mat-button >Menu0 </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="buttonenter()"
(mouseout)="buttonleave()" style=" z-index: 50000">Menu1
</button>
<mat-menu #menu1="matMenu" >
<div (mouseleave)="matMenu1Trigger.closeMenu()"
(mouseenter)="menuenter()"
>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
<button mat-menu-item>Item 5</button>
<button mat-menu-item>Item 6</button>
</div>
</mat-menu>
<button mat-button >MenuX </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu2"
#matMenu1Trigger2="matMenuTrigger"
(mouseenter)="buttonenter2()"
(mouseout)="buttonleave2()" style=" z-index: 50000">Menu2
</button>
<mat-menu #menu2="matMenu" >
<div (mouseleave)="matMenu1Trigger2.closeMenu()"
(mouseenter)="menuenter2()"
>
<button mat-menu-item>Item2 1</button>
<button mat-menu-item>Item2 2</button>
<button mat-menu-item>Item2 3</button>
<button mat-menu-item>Item2 4</button>
<button mat-menu-item>Item2 5</button>
<button mat-menu-item>Item2 6</button>
</div>
</mat-menu>
<button mat-button >Menu3 </button>
<button mat-button >Menu4 </button>
<button mat-button >Menu5 </button>
<button mat-button >Menu6 </button>
</mat-toolbar>
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
isEnterMatMenuOpen = false;
@ViewChild('matMenu1Trigger') _matMenu1Trigger
@ViewChild('menuButton') _menuButton
isEnterMatMenuOpen2 = false;
@ViewChild('matMenu1Trigger2') _matMenu1Trigger2
@ViewChild('menuButton2') _menuButton2
buttonenter() {
this._matMenu1Trigger.openMenu();
this.isEnterMatMenuOpen = false;
}
menuenter() {
this.isEnterMatMenuOpen = true;
}
buttonleave() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen ) this._matMenu1Trigger.closeMenu();
}, 50);
}
buttonenter2() {
this._matMenu1Trigger2.openMenu();
this.isEnterMatMenuOpen2 = false;
}
menuenter2() {
this.isEnterMatMenuOpen2 = true;
}
buttonleave2() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen2 ) this._matMenu1Trigger2.closeMenu();
}, 50);
}
}
1
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
add a comment |
<mat-toolbar color="primary">
<button mat-button >Menu0 </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="buttonenter()"
(mouseout)="buttonleave()" style=" z-index: 50000">Menu1
</button>
<mat-menu #menu1="matMenu" >
<div (mouseleave)="matMenu1Trigger.closeMenu()"
(mouseenter)="menuenter()"
>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
<button mat-menu-item>Item 5</button>
<button mat-menu-item>Item 6</button>
</div>
</mat-menu>
<button mat-button >MenuX </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu2"
#matMenu1Trigger2="matMenuTrigger"
(mouseenter)="buttonenter2()"
(mouseout)="buttonleave2()" style=" z-index: 50000">Menu2
</button>
<mat-menu #menu2="matMenu" >
<div (mouseleave)="matMenu1Trigger2.closeMenu()"
(mouseenter)="menuenter2()"
>
<button mat-menu-item>Item2 1</button>
<button mat-menu-item>Item2 2</button>
<button mat-menu-item>Item2 3</button>
<button mat-menu-item>Item2 4</button>
<button mat-menu-item>Item2 5</button>
<button mat-menu-item>Item2 6</button>
</div>
</mat-menu>
<button mat-button >Menu3 </button>
<button mat-button >Menu4 </button>
<button mat-button >Menu5 </button>
<button mat-button >Menu6 </button>
</mat-toolbar>
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
isEnterMatMenuOpen = false;
@ViewChild('matMenu1Trigger') _matMenu1Trigger
@ViewChild('menuButton') _menuButton
isEnterMatMenuOpen2 = false;
@ViewChild('matMenu1Trigger2') _matMenu1Trigger2
@ViewChild('menuButton2') _menuButton2
buttonenter() {
this._matMenu1Trigger.openMenu();
this.isEnterMatMenuOpen = false;
}
menuenter() {
this.isEnterMatMenuOpen = true;
}
buttonleave() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen ) this._matMenu1Trigger.closeMenu();
}, 50);
}
buttonenter2() {
this._matMenu1Trigger2.openMenu();
this.isEnterMatMenuOpen2 = false;
}
menuenter2() {
this.isEnterMatMenuOpen2 = true;
}
buttonleave2() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen2 ) this._matMenu1Trigger2.closeMenu();
}, 50);
}
}
<mat-toolbar color="primary">
<button mat-button >Menu0 </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
#matMenu1Trigger="matMenuTrigger"
(mouseenter)="buttonenter()"
(mouseout)="buttonleave()" style=" z-index: 50000">Menu1
</button>
<mat-menu #menu1="matMenu" >
<div (mouseleave)="matMenu1Trigger.closeMenu()"
(mouseenter)="menuenter()"
>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
<button mat-menu-item>Item 5</button>
<button mat-menu-item>Item 6</button>
</div>
</mat-menu>
<button mat-button >MenuX </button>
<button mat-button routerLink="/products" [matMenuTriggerFor]="menu2"
#matMenu1Trigger2="matMenuTrigger"
(mouseenter)="buttonenter2()"
(mouseout)="buttonleave2()" style=" z-index: 50000">Menu2
</button>
<mat-menu #menu2="matMenu" >
<div (mouseleave)="matMenu1Trigger2.closeMenu()"
(mouseenter)="menuenter2()"
>
<button mat-menu-item>Item2 1</button>
<button mat-menu-item>Item2 2</button>
<button mat-menu-item>Item2 3</button>
<button mat-menu-item>Item2 4</button>
<button mat-menu-item>Item2 5</button>
<button mat-menu-item>Item2 6</button>
</div>
</mat-menu>
<button mat-button >Menu3 </button>
<button mat-button >Menu4 </button>
<button mat-button >Menu5 </button>
<button mat-button >Menu6 </button>
</mat-toolbar>
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
isEnterMatMenuOpen = false;
@ViewChild('matMenu1Trigger') _matMenu1Trigger
@ViewChild('menuButton') _menuButton
isEnterMatMenuOpen2 = false;
@ViewChild('matMenu1Trigger2') _matMenu1Trigger2
@ViewChild('menuButton2') _menuButton2
buttonenter() {
this._matMenu1Trigger.openMenu();
this.isEnterMatMenuOpen = false;
}
menuenter() {
this.isEnterMatMenuOpen = true;
}
buttonleave() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen ) this._matMenu1Trigger.closeMenu();
}, 50);
}
buttonenter2() {
this._matMenu1Trigger2.openMenu();
this.isEnterMatMenuOpen2 = false;
}
menuenter2() {
this.isEnterMatMenuOpen2 = true;
}
buttonleave2() {
setTimeout(() => {
if( !this.isEnterMatMenuOpen2 ) this._matMenu1Trigger2.closeMenu();
}, 50);
}
}
edited Nov 22 '18 at 6:29
answered Nov 22 '18 at 6:14
JimmyJimmy
112
112
1
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
add a comment |
1
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
1
1
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
The above code will work to hover and leave angular material menu items. The key is: style=" z-index: 50000" to make it works. It is a rough test code for the concept. You have to make the code looks nice if you want to use it.
– Jimmy
Nov 22 '18 at 6:31
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
This looks nice but only on first look. On second, sometimes its impossible to mouse into the menu because the menu closes. Also when I move the pointer from button to newly opened menu and try to move back to button, second menu duplicate pops-up right next to the opened one. Didn't expect having such an menu would be such an issue with Angular Material... Especially compared to competition like mdbootstrap.com, primefaces.org/primeng/# etc
– user1622058
Nov 22 '18 at 10:11
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408953%2fangular-material-hide-menu-on-buttons-mouseleave%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you want to try this with
css
instead ofjavascript
?– Bagherani
Nov 21 '18 at 9:46
Try to bind menu's
opened
value to a component typescript variable instead and to change that value from the event.. Like: (HTML)<mat-menu #menu1="matMenu" [opened]="varOpened">
(TYPESCRIPT):var varOpened: boolean = false;
(HTML):<div (mouseleave)="closeMenu()">
(TYPESCRIPT):closeMenu(){ this.varOpened=false; }
. I don't have tested but I always acted like this way before with Angular Material's stuff so... let me know if it works!– Deadpool
Nov 21 '18 at 9:52
@Deadpool: There is no such property as
opened
, see material.angular.io/components/menu/api– user1622058
Nov 21 '18 at 15:54