How to make disable right click function in angular called from any component

Question

<div class="container" (contextmenu)="onRightClick()">
</div>

I want to disable right click in a few components and not the whole website. I have to define the below function in all the components where I want to disable right click. What's the best way to do it so that I don't have to define the function again and again in those components

onRightClick() {
  return false;
}

score 31 · Accepted Answer · answered Jun 19 '19 at 06:35

31

It's the contextmenu event : create a directive to manage that.

Stackblitz

@HostListener('contextmenu', ['$event'])
onRightClick(event) {
  event.preventDefault();
}

answered Jun 19 '19 at 06:35

returning `false` from the method will also do like `onRightClick(event) { return false; }`. So, if possible can you suggest which one is better. – Abhishek Kumar Jun 19 '19 at 06:59
@AbhishekKumar [look for it on google](https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) – Jun 19 '19 at 07:30

Nikola Stekovic · Answer 2 · 2021-06-02T10:49:49.073

My advice is to make a directive that will have click binded to element where it is attached. You got small tutorial on their official documentation and it should give you clear path on what you should make.

In this case, you can reuse directive all over your app and will do just the same thing. Will bind click to element where it is attached and will have some logic in it, so you don't repeat yourself.

doc

Example:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDisableRightClick]'
})
export class DisableRightClickDirective {
  @HostListener('contextmenu', ['$event'])
  onRightClick(event) {
    event.preventDefault();
  }
}

you can also make module that will export this directive and in order to use it in your other modules, just import that module. Modules should look like the following:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DisableRightClickDirective } from './disable-right-click.directive';

@NgModule({
  declarations: [
    DisableRightClickDirective
  ],
  imports: [
    CommonModule
  ],
  exports: [
    DisableRightClickDirective
  ]
})
export class DisableRightClickModule {
}

In every module, where you'd like to use this directive, all you have to do is import DisableRightClickModule. And that's pretty much it.

import { NgModule } from '@angular/core';
import { DisableRightClickModule } from './disable-right-click.module';

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ....,
    DisableRightClickModule
  ]
})
export class SomeDummyModule {
}

Inside your HTML just attach directive to any element as attribute eg.

<a href="#" appDisableRightClick>

it is working. thanks. just add on for new in angular. need to add above given selector appDisableRightClick on html element ex:
or :) — Abhishek Singh, Jun 01 '21 at 11:07

score 5 · Answer 3 · edited Dec 17 '20 at 10:30

5

you can easily do like below:

<div class="container" (contextmenu)="onRightClick()"></div>

onRightClick(event) {
  event.preventDefault();
}

note: this code only disable right click for the div you referred. If you want to disable for all page you can use:

@HostListener('contextmenu', ['$event'])
  onRightClick(event) {
  event.preventDefault();
}

edited Dec 17 '20 at 10:30

ssuperczynski

2,883
3
42
58

answered Dec 20 '19 at 02:58

Me Sa

918
9
13

This answer fits for my situation, I only need to disable right-click on few components. If you need to disable in the whole project, create a directive. – alexchvrches Mar 26 '20 at 21:50

score 1 · Answer 4 · answered Sep 06 '21 at 09:11

1

If you are interested to disable right click on entire Angular app, use below in index.html file.
<body class="mat-typography" oncontextmenu="return false">

answered Sep 06 '21 at 09:11

Palash Roy

1,147
11
10

score 0 · Answer 5 · answered May 31 '22 at 06:26

0

It worked for me without Hostistner. (contextmenu)="$event?.preventDefault();"

answered May 31 '22 at 06:26

Zia Khan

133
2
6

How to make disable right click function in angular called from any component

5 Answers5