NbContextMenu - not sure how to trigger methods on click of a menu item

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior: At the moment, it’s unclear how to easily add actions to a click of a menu item using the nbContextMenu component.

There is some info in the documentation about adding an event listener and using pipe to get which item was clicked, however apart from creating a window alert showing the value that was clicked, I’m not sure how t0 trigger different methods depending on what was clicked.

Expected behavior: I would like to be able to create the menu array with two values instead of just providing a title. I’d like to be able to define a context menu like this:

userMenu = [
    { title: 'Profile', action: 'ProfileClicked()' },
    { title: 'Log out', action: 'logout()' }
]

Then passing this into the menu like so [nbContextMenu]=userMenu would trigger the methods I’ve defined in the array.

If this isn’t possible would really appreciate some help in how I could code this into the below example from the documentation:

ngOnInit() {
    this.nbMenuService.onItemClick()
      .pipe(
        filter(({ tag }) => tag === 'my-context-menu'),
        map(({ item: { title } }) => title),
      )
      .subscribe(title => this.window.alert(`${title} was clicked!`));
  }

Steps to reproduce: ngx-admin with the example above from the documentation implemented into the header.component.ts

[ArslanAhmet]

this.menuService.onItemClick().subscribe((event) => {
  if (event.item.title === 'Log out') {
    console.log('logout clicked');
  }
});

[nnixaa]

Hi @jjgriff93, currently there is no built-in way, but a menu item accepts an option called data, so that you can pass any info into it. So you can pass there som id and then check which item is clicked based on that id:

userMenu = [
    { title: 'Log out', data: { id: 'logout' } },
]

ngOnInit() {
    this.nbMenuService.onItemClick()
      .pipe(
        filter(({ tag }) => tag === 'my-context-menu'),
      )
      .subscribe((item: NbMenuItem) => {
		if (item.data.id === 'logout') { ... }
	  });
  }