isaacplmann / ngx-contextmenu

An Angular component to show a context menu on an arbitrary component
MIT License
248 stars 91 forks source link

Unable to use custom context menu on multiple components #196

Open vishalkukreja opened 4 years ago

vishalkukreja commented 4 years ago

Hi @isaacplmann

We are using ngx-contextmenu for our project, where we have 2 layouts. 1) List view - for this we are using ag-grid library 2) Justified view (Photo layout)

We have created a different component as custom-context-menu and wanted to re-use through selector. I've referred #92 for this scenario, however, we are facing lots of issues in our case.

Code: Using below in custom-context-menu.compoennts.html

<customcontextmenu >
    <ng-template contextMenuItem let-item (execute)="onClickItem($event)">Apple</ng-template>
    <ng-template contextMenuItem let-item divider="true"></ng-template>
    <ng-template contextMenuItem> let-itemPear</ng-template>
</customcontextmenu>

code in custom-context-menu.components.ts


@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'customcontextmenu',
  styles: [`
    .cdk-overlay-container {
      position: fixed;
      z-index: 1000;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .ngx-contextmenu.cdk-overlay-pane {
      position: absolute;
      pointer-events: auto;
      box-sizing: border-box;
    }
  `],
  template: ` `,
  providers: [ExtendableContextMenuComponent]
})
export class ExtendableContextMenuComponent extends ContextMenuComponent {
}
@Directive({
  selector: 'customcontextmenu',  
})
export class CustomContextMenuComponent  implements OnInit {

  public basicMenu: ContextMenuComponent;

  constructor( public contextMenu: ExtendableContextMenuComponent,public globalService:GlobalService,public addtoSelectedFile:AddToSelectedFolderComponent,public shareService:ShareService, private contextMenuService: ContextMenuService) {    
  }

  ngOnInit() {
  }

  onContextMenu($event: MouseEvent, item: any): void {
    this.contextMenuService.show.next({
      contextMenu: this.contextMenu,
      event: $event,
      item: item
    });        
  }

}

How can we make a call on list view (ag-grid) item click?

Kindly help with this issue.