Ngx-admin: How can I handle a click event with the nb-menu component?

Created on 22 Sep 2018  路  1Comment  路  Source: akveo/ngx-admin

Issue type

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

  • [ ] bug report
  • [ ] feature request
  • [ ] question about the decisions made in the repository
  • [x] question

Issue description

How can I handle a click event to a nb-menu component? I have checked the documentation and it only allows me to specify a router Link or url.

Documentation: https://akveo.github.io/nebular/docs/components/menu/overview#nbmenucomponent

Purpose: I need to programatically close the sidebar menu when a user has clicked/taped on the menu item for mobile screen widths.

sidebar from: https://www.npmjs.com/package/ng-sidebar

Steps to reproduce:

items = [
    {
      title: 'Profile',
      expanded: true,
      children: [
        {
          title: 'Change Password',
          link: [], // goes into angular `routerLink`
        },
        {
          title: 'Privacy Policy',
          ulr: '#', // goes directly into `href` attribute
        },
        {
          title: 'Logout',
          link: [],
        },
      ],
    },
    {
      title: 'Shopping Bag',
      link: [],
    },
    {
      title: 'Orders',
      link: [],
    },
  ];
// ...
<nb-menu (click)="handlerFunc()??" [items]="items"></nb-menu>

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.8.3
@angular/cli                      6.2.3
@ngtools/webpack                  6.0.8
@schematics/angular               0.8.3
@schematics/update                0.8.3
rxjs                              6.3.2
typescript                        2.7.2
webpack                           4.8.3
node: v10.8.0
npm: 6.2.0
"@nebular/auth": "2.0.0-rc.10",
"@nebular/security": "2.0.0-rc.10",
"@nebular/theme": "2.0.0-rc.10",

Most helpful comment

Hi @Jonathan002, it's not mentioned in the menu documentation now, sorry for that.
You can do the following:

constructor(menu: NbMenuService) {
  menu.onItemClick().subscribe(() => {
    // .... do what you want
  });
}

>All comments

Hi @Jonathan002, it's not mentioned in the menu documentation now, sorry for that.
You can do the following:

constructor(menu: NbMenuService) {
  menu.onItemClick().subscribe(() => {
    // .... do what you want
  });
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dreamerleolioa picture dreamerleolioa  路  4Comments

maxlein picture maxlein  路  3Comments

nfdavenport picture nfdavenport  路  3Comments

myurAgarwal picture myurAgarwal  路  3Comments

PatrickHuetter picture PatrickHuetter  路  3Comments