ng2-contextmenu

Contextmenu module for angular2

Plunkr Demo

Usage

Install

npm i --save ng2-contextmenu

Load module

// ...
import { ContextmenuModule } from 'ng2-contextmenu';

// ...
@NgModule({
  imports:      [ BrowserModule, ContextmenuModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { /* ... */ }

Use in your Template

<contextmenu #contextmenu>
  <div class="dropdown open">
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">{{contextmenu.get('item.id')}} -> {{contextmenu.get('item.label')}}</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</contextmenu>

<ul class="list-group">
  <li class="list-group-item"
    [contextmenu]="[contextmenu, {item: item}]"
    *ngFor="let item of list; let i = index;" class="list-group-item"
  >
    {{item.label}} ({{item.id}})
  </li>
</ul>

What you must know

• 👷 The module is not feature complete -> still work in progress!
• ⚡ The Module has no dependency on bootstrap or jquery (the example uses bootstrap styles!)
• 🎱 You can use multiple contextmenu's in the same template; just reference the menu you want to use in the directive:

<contextmenu #menu1>
<!-- ... -->
</contextmenu>

<!-- ... -->
<div [contextmenu]="[menu1, {}]"></div>
<!-- ... -->