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.