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

<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">
      <span class="badge badge-primary badge-pill">optional text</span>
    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
      <span class="badge badge-primary badge-pill">optional text</span>
    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
      <span class="badge badge-primary badge-pill">optional text</span>

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.

    position: absolute;

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

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

  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

<div class="body" (click)="closeRightClickMenu()">
  welcome {{user}}
  <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>
<app-right-click-menu *ngIf="!isHidden" [x]="xPosTabMenu" [y]="yPosTabMenu"></app-right-click-menu>

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.

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

  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) {
    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.
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';

declarations: [
imports: [
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]


  1. This project is not running in http://localhost:4200/. Coming blank screen.

    1. Hello Dinesh, above project is tested before uploading, you might be having some version problem or you can check for error by saying inspect in your browser.
      Please feel free to ask anything.

  2. You'll have to create an account to play games, and all of your progress remains secure in your account. The solely problem is its availability; even with VPNs, you may not in a position to|be succesful of|have the ability to} entry this website. If you are 퍼스트카지노 a fan of incomes plenty of money and not using a|with no} tense poker recreation, mBit Casino is a superb choice. This on line casino is legendary for its free slot machines and unique slot games. You need to be their premium member to be able to} entry the unique slot games the place have the ability to|you presumably can} earn greater than traditional.


Post a Comment