Using mat-menu as context menu: How to close opened mat-menu, and open it in another location

[brucebrit]

Angular: v8.2.8
Angular material: 8.2.2

I manage to use mat-menu (angular material) to emulate the context menu. Right clicking anyway on my page, the menu appears at my mouse location.

What I want to achieve: when I move my mouse to another location on the page, I right click again. I was expecting the menu at the original location to close, and reopen at the new location.

But In reality: Nothing happen and the menu at the original location remain open, and no menu open at the new location.

In fact, I have to left click to close the opened menu at original location, followed by right click to open menu at the new mouse location.

Question: Any idea how to achieve what I want?

@Component({
  selector: 'fl-home',
  template:`
 <mat-menu #contextmenu>
      <div >
           <button mat-menu-item>Clear all Paths</button>
       </div>
  </mat-menu>
  <div [matMenuTriggerFor]="contextmenu" [style.position]="'absolute'" [style.left.px]="menuX" [style.top.px]="menuY" ></div>
  
  <div class="container" (contextmenu)="onTriggerContextMenu($event);"> ....</div>
`})
export class HomeComponent  {

    menuX:number=0
    menuY:number=0

    @ViewChild(MatMenuTrigger,{static:false}) menu: MatMenuTrigger; 
    
   
    onTriggerContextMenu(event){
        
        event.preventDefault();
        this.menuX = event.x - 10;
        this.menuY = event.y - 10;
        this.menu.closeMenu() // putting this does not work.
        this.menu.openMenu()

    }
}

[Splaktar]

Please submit Angular Material and CDK questions here and issues here. This repo is for docs infrastructure only.

There are better avenues for troubleshooting or asking for help with your app. These include Stack Overflow or Gitter.

[JituG22]

I have created my won solution. Its super easy as we know service are very useful whenever two/multiple component for exchange/Record and storing data. Please go through step by step.

step -1 (create a service file )
matMenu.service.ts
import { MatMenuTrigger } from '@angular/material/menu';

export class MatMenuService{
public ismatmenuOpen:MatMenuTrigger[] = [];
}

step -2 (your respective component abc )
abc.component.html

<span   [matMenuTriggerFor]="levelOne" #matTrigger="matMenuTrigger" (mouseenter)="mouseEnterFun()"> </span>
<mat-menu #levelOne="matMenu"  direction="down" yPosition="below" [hasBackdrop]="false"> ........... </mat-menu>

abc.component.ts

import { Component, OnInit, ViewChild, } from '@angular/core';
import { MatMenuTrigger } from '@angular/material';
import { MatMenuService} from 'matMenu.service.ts';
 @ViewChild('matTrigger') matTrigger: MatMenuTrigger;
   
 export class abcComponent implements OnInit {

 constructor( public MatMenuService:MatMenuService){ }

     mouseLeveFun(){
        let len = this.MatMenuService.ismatmenuOpen.length;
        if(len !== -1){
            for(var t=0; t<len;t++){
                this.MatMenuService.ismatmenuOpen[t].closeMenu();
            }
            this.MatMenuService.ismatmenuOpen = [];
        }
    }
    mouseEnterFun(){
        let len = this.MatMenuService.ismatmenuOpen.length;
        if(len !== -1){
            for(var t=0; t < len; t++){
                this.MatMenuService.ismatmenuOpen[t].closeMenu();
            }
            this.MatMenuService.ismatmenuOpen = [];
        }
        this.MatMenuService.ismatmenuOpen.push(this.levelOneTrigger);
        this.MatMenuService.ismatmenuOpen[0].openMenu();
    }

}

Its 100% work ...! you can open from any component and close from any component. keep track as you want.