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

[jjgriff93]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [X] 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

[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') { ... }
      });
  }

[jjgriff93]

HI @nnixaa - okay cool, would be great to see a built in way in the future. Thanks very much for the code snippet, that's worked a treat :)

[nnixaa]

Great! Closing it then as a duplicate of #624 (request to add an id property to handle the item properly).

[el7or]

constructor(private menuService: NbMenuService,
               private userService: UserService) {
  }

  ngOnInit() {
    this.userService.getUsers()
      .subscribe(( users: any ) => this.user = users.nick);
    this.menuService.onItemClick().subscribe(( event ) => {
      this.onItemSelection(event.item.title);
    })
  }

[ArslanAhmet]

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

[jackson1992121]

Thanks, @ArslanAhmet. Your answer is succinct and clear. It was helpful.

[aabi0044]

@ArslanAhmet is there a way to get the value of main menu item, not the submenu item?

[islomkhon]

constructor(
menu: NbMenuService
)
{
menu.onItemSelect().subscribe((menuBag) => {

  switch(menuBag.item.title) {
    case 'Logout':
      this.signOut();
      break;
    default:
  }
});

}