TypeScript icon, indicating that this package has built-in type declarations

2.0.0-alpha.8 • Public • Published



Stop redundantly defining your shortcuts in your shortcut library and your context menu. Start using Contexr!

Contexr is a context menu integrated with a shortcut module for Angular. Provide the module with different contexts and actions and they will appear in the context menu when you add ctx="context-name to your HTML element. You can add a shortcut for every context menu person there is, which will be the same all throughout your application.



Installing Contexr is as simple as running the install command.

npm install contexr --save

Using Contexr

After installation, you can add context to any component! For example, if you want to increase the number displayed in a div using a context menu item, start by creating a field for our count and create a field for the context.

count = 0;
context = [
    text: 'Increase',
    context: ['increase-count'],
    action: () => {
    hotkey: 'i'

Next, inject the ContexrService and register the context within the constructor.

constructor(private contexr: ContexrService) {

This method will register your context menu item and configure the hotkey given. Now add an HTML element to your page. Use the [ctx] attribute to add a context.

  style="background: lightblue; padding: 20px;"
  Use the context menu to increase the count.
  <br />
  Count: {{count}}

Check out the demo site to see this working!

Adding arguments to your context

Adding arguments can be done using two simple steps. First, create a context item in your component. Add args: any to the method signature of the action method.

const context: any = [
  // Your other context items
    text: 'Say my name',
    context: ['say-my-name'],
    action: (args: any) => {
      console.log('My name is ' +;

Off course, you need to do something in your action method. We added a log statement that call out a name.

The second step is to add the context to your HTML elements. This time, we will add [ctxArgs]="some object" to the element to pass our argument. Let's add context to some rows of a table.

<table style="background: grey;">
  <tr style="background: #b0b0b0;" [ctx]="'say-my-name'" [ctxArgs]="{name: 'Heisenberg'}">
  <tr style="background: #b0b0b0;" [ctx]="'say-my-name'" [ctxArgs]="{name: 'Jesse'}">

Package Sidebar


npm i contexr

Weekly Downloads






Unpacked Size

569 kB

Total Files


Last publish


  • scubakay