Pop up / Context menu on Right click in Angular

Hey guys, in this tutorial we are going to see how to implement a mouse’s right-click event of any dom element in angular and show context menu on right-click.

We are going to use the same project from our blog to do this task.

 [At the bottom you will get a link to download the project ]

Very first let's create the menu content, for that create a menu component

Command: ng g c righclickmenu

And add a list of menu item into it

Here is HTML of

right-click-menu.component.html

<div class="menu" [ngStyle]="{'left.px': x, 'top.px': y}">

  <ul class="list-group">

    <li class="list-group-item list-group-item-action d-flex justify-content-                                                                          between align-items-center">

      1.option

      <span class="badge badge-primary badge-pill">optional text</span>

    </li>

    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">

      2.option

      <span class="badge badge-primary badge-pill">optional text</span>

    </li>

    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">

      3.option

      <span class="badge badge-primary badge-pill">optional text</span>

    </li>

  </ul>

</div>

In above html we have added list of items. Everything is right, but you might wondering what is first line i.e.

<div class="menu" [ngStyle]="{'left.px': x, 'top.px': y}">

At this line, we are declaring the parameter to accept the run-time co-ordinate of mouse click so we can show the menu where the user clicked mouse’s right button.

Run time we are going to catch the co-ordinate and will pass here, you will understand it later.

Most important is, you should write your own function on each menu item so it will perform the intended function. Here we have not implemented any menu items function.

right-click-menu.component.css

.menu{

    position: absolute;

}

And the very important thing is, make your menu position absolute, otherwise, it will break your UI very badly.

right-click-menu.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({

  selector: 'app-right-click-menu',

  templateUrl: './right-click-menu.component.html',

  styleUrls: ['./right-click-menu.component.css']

})

export class RightClickMenuComponent implements OnInit {

  @Input() x = 0;

  @Input() y = 0;

  constructor() { }

  ngOnInit() {

  }

}

 

Here we have declared x and y to accept the input from home page component

(x and y coordinates of a mouse click)

Now add our menu to our homepage component

homepage.component.html

<div class="body" (click)="closeRightClickMenu()">

<p>

  welcome {{user}}

  <br>

  <button class="btn btn-primary" (contextmenu)="rightClick($event)">Click me </button><br><br>

  <button class="btn btn-primary" (contextmenu)="rightClick($event)">second Click me</button>

</p>

<app-right-click-menu *ngIf="!isHidden" [x]="xPosTabMenu" [y]="yPosTabMenu"></app-right-click-menu>

</div>

In our home page, we have created two buttons and at last added components selector of our menu.

Here we have used  (contextmenu)="rightClick($event)" ,  to catch the right click event and called “rightClick” user defined function on arrive of event. And the same event is passed to function so we can identify and get the data from that event.

 And one more thing is, [x] and [y] as you know, those are declared in our menu component and we are passing values to them from this component.

homepage.component.ts

import { Component, OnInit, Input } from '@angular/core';

import { user } from '../user/user';

@Component({

  selector: 'app-homepage',

  templateUrl: './homepage.component.html',

  styleUrls: ['./homepage.component.css']

})

export class HomepageComponent implements OnInit {

  private user: user;

  constructor() { }

  public isHidden: Boolean = true;

  xPosTabMenu: Number;

  yPosTabMenu: Number;

  ngOnInit() {

    this.user = JSON.parse(localStorage.getItem("user"));

  }

  rightClick(event) {

    event.stopPropagation();

    this.xPosTabMenu = event.clientX;

    this.yPosTabMenu = event.clientY;

    this.isHidden = false;

    return false;

  }

  closeRightClickMenu() {

    this.isHidden = true;

  }

}

This is the module file to let you know all the imports and dependencies.
app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { FirstPageComponent } from './first-page/first-page.component';

import { SecondPageComponent } from './second-page/second-page.component';

import { FormsModule } from '@angular/forms';

import { HomepageComponent } from './homepage/homepage.component';

import { RightClickMenuComponent } from './right-click-menu/right-click-menu.component';

@NgModule({

declarations: [

AppComponent,

FirstPageComponent,

SecondPageComponent,

HomepageComponent,

RightClickMenuComponent

],

imports: [

BrowserModule,

AppRoutingModule,

FormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Here on right-click, very first we have stopped propagation so our browser’s right-click menu should get blocked

Same time we have accepted and set x y co-ordinate and made it visible.

And finally implemented the closeRightClickMenu method.

Yeah… that’s all we have done to implement the menu on right click of any element.

 [here you can download the project: get me project]