A custom right click menu on Angular : FEAT PrimeNg
Tags: webdev, javascript, programming, html
Published: 2022-07-10 08:14:23

This implementation uses [PrimeNg](https://www.primefaces.org/primeng/) to ease our implementation on context menu rather more focusing on copy and paste options.

Here is a [HTML implementation](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oncontextmenu) then use custom eventhandlers.

One of the requirements is to not have a right click that shows the regular browser stuff! Instead show a copy option that will copy our text whichever is highlighted. 

![Current Vs Final ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svxl0sigtobnzkvybeat.png)

Here is the template. Using [PrimeNg Context Menu](https://www.primefaces.org/primeng/contextmenu) that enables globally overwriting the default context menu the browser provides.

{% embed https://gist.github.com/ShrihariMohan/59f4f4b13d013d4b9b544837ac48d480 %}

```typescript
<p-contextMenu [global]="true" [model]="items" (onShow)="onShow()"></p-contextMenu>
```
**_[global]_** - will allow the right click anywhere on the screen and we can make the right click to happen on any particular tag also like images/table.

_**[model]**_ - is the menu items that follows [MenuItems API](https://www.primefaces.org/primeng/menumodel)

_**(onShow)**_ - when ever the context menu opens this event gets called . This is used to disable **copy** when nothing is selected/highlighted.

{% embed https://gist.github.com/ShrihariMohan/923725cdf12ec119e0d803ca15a615b5 %}

Certain code parts explanation.

 ```typescript
 items: MenuItem[] = [
    {
      label: 'Copy',
      icon: 'pi pi-copy',
      command: this.copyText.bind(this)
    }
  ];
```

Since we have now enable only the **copy** option this array contains only one element. The **command** function runs everytime the click happens on the copy.

```typescript
onShow() {
    const selected = window.getSelection()?.toString()
    this.items[0].disabled = !selected
  }
```

This **onShow()** is called everytime the context opens. we're disabling the copy button if nothing is selected on the window.

```typescript
 copyText() {
    const selected = window.getSelection()?.toString()
    if (selected) {
      this.clipboard.copy(selected)
      this.showToaster(selected)
    }
  }
```

**copyText()** is binded in the items array. We're using angular clipboard to copy the selected string and just showing a toaster.

To implement this exactly you need several entries in your packages , module.ts. Make sure you go through the primeNg documentation to setup.

## Why there is no Paste option ?

On Right click you can get the active element using `document.activeElement` then we will perform several checks to make sure its a input field and setAttribute value = copiedText.

This document.activeElement goes out of angular and the angular doesn't react to the change we made in activeElement

Lets assume you have only one input where the paste is needed. You can do like this.

![Copy Paste Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08yn4dmoji58qm84zger.gif)

But if you have already in the project and have forms all over the pages we have to do a lot of changes to make it work. 

The other main thing is paste requires the clipboard history permission which is sensitive and some of the website to be certified may not allow you to access the clipboard history.

So just show a toaster to press the keyboard shortcuts. More information about Paste and Javascript.
 
Learn more about [MDN Paste Event](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event)
Learn more about [MDN clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard)

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari and may considering a [buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan).

Peace  🕊 

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---


## More Free Articles From me !

{% embed https://dev.to/shrihari/top-ui-frameworks-for-angular-and-react-1951 %}

{% embed https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb %}

{% embed https://dev.to/shrihari/things-i-do-to-be-motivated-towards-work-39md %}