Post
Ask Question

Disabling the Right Click in Angular UI

Disabling right click is very often required in applications. Let's see how to achieve this in Angular.
 
In Angular we can achieve this by creating the directive and applying that directive to the control level.
 
Code:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Disabling right click on Angulare UI </title>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>  
  6.     <script language="javascript">  
  7.         var app = angular.module("sampleApp", []);  
  8.   
  9.         app.controller("AppCtrl", function ($scope) {  
  10.             // console.log('called');  
  11.         })  
  12.   
  13.         app.directive('preventRightClick', [  
  14.   
  15.             function () {  
  16.                 return {  
  17.                     restrict: 'A',  
  18.                     link: function ($scope, $ele) {  
  19.                         $ele.bind("contextmenu", function (e) {  
  20.                             e.preventDefault();  
  21.                             alert("Right click is disabled");  
  22.                         });  
  23.                     }  
  24.                 };  
  25.             }  
  26.         ])  
  27.   
  28.     </script>  
  29. </head>  
  30. <body>  
  31.     <div ng-app="sampleApp" ng-controller="AppCtrl " prevent-right-click style="height: 200px;  
  32.         width: 400px; border: 5px solid gray">  
  33.         <h4>  
  34.             Disabling the right click on the Angular elements</h4>  
  35.         <div>  
  36.             <a href="#">Click Me </a>  
  37.             <button prevent-right-click>  
  38.                 Right click me</button>  
  39.         </div>  
  40. </body>  
  41. </html>  
 Lets see the output

 Hope you got the information on how to disable right click in Angular. Hope it is useful to the readers. Thanks for reading.