angular material context menu code example

Example: matmenutriggerfor right click

@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()

    }
}

Tags:

Misc Example