I have tried to search for solutions which would allow me to disable right click on the whole application in Angular 2+ but I get only solutions for disabling on few components like,
<someSelector appDisableRightClick></someSelector>
where, someSelector is any element of HTML, appDisableRightClick is a directive to disable right click using hostlistener for contextmenu event.
The problem with this is it will have to be written everywhere which means if I want to disable right click everywhere in my application, this is not something I should be looking for. Need a little help here please for the optimum solution to achieve this for the whole application.
Working demo in this Stackblitz Demo Link
Basically need to access document object inside angular service using injection token of document, so that its safe way to access dom using document inside angular. below is service code
export class DisableRightClickService {
constructor(@Inject(DOCUMENT) private document: Document) {}
disableRightClick() {
this.document.addEventListener('contextmenu', (event) =>
event.preventDefault()
);
}
}
In above code we are adding contextmenu event to document and at the same time we prevent event to occur too!. Now, need to add this inside app.component.ts file like below..
export class AppComponent {
constructor(private rightClickDisable: DisableRightClickService) {}
ngOnInit() {
this.rightClickDisable.disableRightClick();
}
}
This way you can disable right click for your whole application.
As commented by @GRD, the below link provides a good and acceptable solution for the problem. Asked him to put comment in answers section, but he didn't, need to close this question, so putting it myself here.
https://stackblitz.com/edit/angular-ivy-pvmcrz?file=src%2Fapp%2Fapp.component.ts