Ngx-admin: Adding dynamic menu items

[Hehohehoheho]

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [x] question about the decisions made in the repository

• Do you want to request a feature or report a bug?

I wanted to ask if it is possible to dynamically change the sidebar menu at runtime? The reason I ask is because I would like to provide a "Favorites" section in the sidebar which is built using some user-defined items.

[nnixaa]

Hey @Lucasvo1, yes this is possible, just import the menu service and fulfill it with your information like this https://github.com/akveo/ng2-admin/blob/master/src/app/pages/pages.component.ts#L39

[Hehohehoheho]

Damn. Don't know why I missed that. Thanks very much for the help. Also thanks for all the work you guys are doing.

[gate3]

The sample for using menu service isn't there any longer. Is there any sample online i can use or can you show me here?

[vishnussuresh]

Hi All, I was able to use 'NbMenuService' to dynamically change the sidebar menu. Here is the code sample.

import { Component } from '@angular/core';
import { NbMenuService, NbMenuItem } from '@nebular/theme';

@Component({
  selector: 'app-pages',
  template: `
            <app-layout>
              <nb-menu [items]="menu"></nb-menu>
              <router-outlet></router-outlet>
            </app-layout>
            `,
})
export class PagesComponent {
  menu = [];
  newMenuItem: NbMenuItem[] = [
  {
    title: 'Home',
    icon: 'ion-home',
    link: 'app/home',
    home: true,
  }]
  constructor( private nbMenuService: NbMenuService ) {
    this.nbMenuService.addItems(this.newMenuItem);
  }
}

[yggg]

You can find NbMenuService api and examples (with source) at the Nebular docs

[temp2010]

You can find NbMenuService api and examples (with source) at the Nebular docs

There's no dynamically loaded example there.

[ghost]

I have a major issue with ngxadmin compared to Fuse Admin. And that is dynamic menu loading based on user login. Fuse provides this, however, I love the look and feel of ngxadmin. Is there any example available to shows how different logins could dynamically trigger the load of api to populate the menu.

[naonvl]

is there any workaround with this?

[starjoka5]

I changed all menu items, creating a MenuService class with an BehaviorSubject property. On the service I have all methods to change the items, and on my ModuleComponent I subscribe to those changes

[SyedTabishAkhter]

this.nbMenuService.addItems(this.newMenuItem);

it adds menu in nb-user as-well . how to restrict it. plz help

[ozanonurtek]

this.nbMenuService.addItems(this.newMenuItem);

it adds menu in nb-user as-well . how to restrict it. plz help

@SyedTabishAkhter You should add tag property to your html element
<nb-menu tag="myMainMenu" [items]="menuItems"></nb-menu>
and than
this.nbMenuService.addItems(this.newMenuItem, "myMainMenu");