Add Context Menu in Nebular Menu Items

Question

I want to add a context menu for menu items (Child 1, 2 and 3). I tried to add but they are not visible on the menu components.

<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
        <ng-content select="[tag='sidebar']"></ng-content>
</nb-sidebar>

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'Parent',
    icon: 'battery-outline',
    children: [
      {
        title: 'Child 1',
        icon: 'charging-outline',
      },
      {
        title: 'Child 2',
        icon: 'charging-outline',
      },
      {
        title: 'Child 3',
        icon: 'charging-outline',
      },
    ],
  },
]

I tried following the method, but not working

<nb-sidebar>
    <nb-menu [items]="menuItems" [autoCollapse]="true">
      <ng-template #itemTemplate let-item="item" let-index="index">
        <a nbMenuItem [link]="item.link" [icon]="item.icon" [routerLinkActive]="['router-link-active']" [nbContextMenu]="items" nbContextMenuTrigger="noop" (contextmenu)="open()">
          {{ item.title }}
        </a>
      </ng-template>
    </nb-menu>
  </nb-sidebar> 

Docs: NbContextMenuDirective