Disable Developer Tool

A simple Angular library to disable right-click context menus and prevent the F12 key press, which can be used to disable developer tools on your application for security or usability reasons.

Features

• Disable Right Click: Prevent users from opening the context menu (right-click).
• Disable F12 Key: Prevent the F12 key from being pressed, which usually opens the developer tools in browsers.

Installation

To install the disable-developer-tool library into your Angular project, run the following command:

npm install disable-developer-tool

Demo

You can see a live demo of this library in action on StackBlitz:

View Demo on StackBlitz

Usage

To use the directives in your Angular project, follow the steps below:

1. Import the DisableDeveloperToolModule in your AppModule In your app.module.ts, import the module from the library.

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DisableDeveloperToolModule } from 'disable-developer-tool'; // Import the module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DisableDeveloperToolModule // Add the module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Use the Directives in Your Template Once the module is imported, you can apply the directives in your template.

Disable Right Click To disable right-click on a specific element, add the DisableRightClick directive to the element:

html

<div DisableRightClick>
  This element has the right-click context menu disabled.
</div>

Disable F12 Key To disable the F12 key (usually used to open developer tools in browsers), add the DisableF12 directive to the element:

html

<div DisableF12>
  This element disables the F12 key press.
</div>

You can also combine both directives on the same element:

html

<div DisableF12 DisableRightClick>
  Both right-click and F12 key are disabled on this element.
</div>

Peer Dependencies

This library requires the following peer dependencies to work correctly:

Version	@angular/common	@angular/core
v1.0.0	^12.0.5	^12.0.5
v1.1.1	^13.0.0	^13.0.0
v1.2.0	^14.0.7	^14.0.7
v1.3.0	^15.2.11	^15.2.11
v1.4.0	^16.2.16	^16.2.16
v1.5.0	^17.3.11	^17.3.11
v1.6.0	^18.2.11	^18.2.11

Ensure that these versions (or compatible versions) of Angular are installed in your project.