<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;
}
It's the contextmenu event : create a directive to manage that.
@HostListener('contextmenu', ['$event'])
onRightClick(event) {
event.preventDefault();
}
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.
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>
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();
}
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">
You have to use a script to disable right click & F12 functions. Add below script in index.html that is in root path in your angular application.
First, add oncontextmenu="return false;" as a HTML attribute for <body> tag as below.
<body oncontextmenu="return false;">
Your
<app-root></app-root>goes next to the<body>tag*
Then, add below script before close <body> tag.
<script>document.addEventListener("contextmenu",e=>e.preventDefault()),document.onkeydown=function(e){return 123!=e.keyCode&&((!e.ctrlKey||!e.shiftKey||73!=e.keyCode)&&((!e.ctrlKey||!e.shiftKey||74!=e.keyCode)&&((!e.ctrlKey||85!=e.keyCode)&&void 0)))};</script>
Finaly, close </body> tag & serve your application again.
Can someone explain why a directive solution is better then simple saying oncontextmenu="return false"
@HostListener('contextmenu', ['$event'])
onRightClick(event) {
event.preventDefault();
}
With a directive you would have to load the directive anytime you are using it to a specific module. I could see that a directive makes sense if you are doing things other than simply disabling the contextmenu. I would like to understand why the directive implementation is more effective than simply saying contextmenu="return false;" mycontextmenudirective vs contextmenu="return false;"
