CODEWITHSUNDEEP
angularangular7nebular
Kavya Shree
Kavya Shree

Reputation: 1032

Nebular menu click refreshing page component Issue

I am using nebular menu in my application, Where I am facing an issue like when I click on menu item its automatically scroll up to top of page and closing/expanding once again which means page.component.ts are hitting again when trying to redirect page.

pages-menu.ts

export const userMenu: NbMenuItem[] = [
  {
    title: "Menu1",
    icon: "nb-person",
    children: [
      {
        title: "SubMenu1",
        link: "/pages/forms/Sub-Menu1"
      },
      {
        title: "SubMenu2",
        link: "/pages/forms/Sub-Menu2"
      }
    ]

And If we call this menu.ts variable in pages.component.ts

menu: any
constructor(){
this.menu = userMenu
}

This works fine. But if I want to make my menu dynamic like show/hide based on some user roles and instead of exporting from menu.ts directly assign menu list in pages.component.ts file Im facing an issue like onclick of each menu item its refreshing entire component and dragging sidebar menu scrolls to top and refreshing takes place.

pages.component.ts

menu: NbMenuItem[]
this.menu = [
      {
        title: "Menu1",
        icon: "nb-person",
        children: [
          {
            title: "SubMenu1",
            link: "/pages/forms/Sub-Menu1"
          },
          {
            title: "SubMenu2",
            link: "/pages/forms/Sub-Menu2"
          }
        ],
"hidden" : this.available_groups.some(v => ['Admin'].includes(v)) ? false : true

Please someone guide me on this issue, Thanks in advance.

Upvotes: 1

Views: 937

Answers (1)

Brian Smith
Brian Smith

Reputation: 1656

You will want to build your menu only after you get the roles. You will set this.menu to [] by default.

Have a function get the user from your backend service and create a function to build your menu.

menu: NbMenuItem[] = [];

ngOnInit() {
 this.getUser();
}

getUser() {
 call your api to get user with roles and then call buildMenuByRole(role)
}

buildMenuByRole(role: any) { <-- use an interface for role
   this.menu = [
    {
        title: 'Dashboard',
        icon: 'home-outline',
        link: '/pages/dashboard',
        hidden: (role && (role.findIndex(x => x.roleID === Roles.SystemAdministrator ||
                                              x.roleID === Roles.ITUser) !== -1)) ? false : true,
        home: true,
      },
   ]
}

Upvotes: 1

Related Questions