Nebular: Add badge to nbMenu/ side menu

[akshayhandoo]

Is there any custom way to do it as it's not officially used with the side menu, so that i can show notification counters in that badge

[sprakash1]

+1

I'm also looking for the same feature. KIndly reply

[akshayhandoo]

+1

I'm also looking for the same feature. KIndly reply

@sprakash1
I managed to do so by copying the menu of nebular(https://github.com/akveo/nebular/tree/master/src/framework/theme/components/menu) folder in my theme/components folder and added a "badge" param in menu.service.ts file and imported NbMenuModule accordingly and added matBadge in 'menu-item.component.html', it worked. i am adding files of my customize menu and also theme.module.ts which you can add in your @theme folder.
Let me know if the problem still occurs
theme.module.ts.zip
menu.zip

[sprakash1]

thanks @akshayhandoo .. its help me

[mohamohamoha]

hello @akshayhandoo & @sprakash1
I added "badge" param in menu.service.ts file and I added matBadge in 'menu-item.component.html' then I saved but nothing worked.

Should I recompile the nebular library somehow or is there something special I have to do after adding those lines? cuz you said that you accordingly imported NbMenuModule.

Thank you!

[parthgodhani]

any one have solution?

[parthgodhani]

+1
I'm also looking for the same feature. KIndly reply

@sprakash1
I managed to do so by copying the menu of nebular(https://github.com/akveo/nebular/tree/master/src/framework/theme/components/menu) folder in my theme/components folder and added a "badge" param in menu.service.ts file and imported NbMenuModule accordingly and added matBadge in 'menu-item.component.html', it worked. i am adding files of my customize menu and also theme.module.ts which you can add in your @theme folder.
Let me know if the problem still occurs
theme.module.ts.zip
menu.zip

NullInjectorError: No provider for NbMenuInternalService!

[akshayhandoo]

+1
I'm also looking for the same feature. KIndly reply

@sprakash1
I managed to do so by copying the menu of nebular(https://github.com/akveo/nebular/tree/master/src/framework/theme/components/menu) folder in my theme/components folder and added a "badge" param in menu.service.ts file and imported NbMenuModule accordingly and added matBadge in 'menu-item.component.html', it worked. i am adding files of my customize menu and also theme.module.ts which you can add in your @theme folder.
Let me know if the problem still occurs
theme.module.ts.zip
menu.zip

NullInjectorError: No provider for NbMenuInternalService!

Hi @parthgodhani ,
Add NbMenuInternalService to theme module provider or to the module you are using this service and if still not working please let me know the bug in details like what steps you have done.

[Allyday]

+1
I'm also looking for the same feature. KIndly reply

I managed to do so by copying the menu of nebular(https://github.com/akveo/nebular/tree/master/src/framework/theme/components/menu) folder in my theme/components folder and added a "badge" param in menu.service.ts file and imported NbMenuModule accordingly and added matBadge in 'menu-item.component.html', it worked. i am adding files of my customize menu and also theme.module.ts which you can add in your @theme folder.
Let me know if the problem still occurs
theme.module.ts.zip
menu.zip

Hi @akshayhandoo, I've add these 2 files to my app/@theme folder, and I'm having the following problems:

• Import errors: There are no corresponding folders in my @theme folder
  
  The imports don't work and my pages.component.ts still import NbMenuItem from @nebular/theme
• Usage: badge takes a boolean value, so I put true, but then nothing actually happens when I save my project. Not even auto-reload & recompiling.

If you could provide a more detailed instruction on how to apply your customizations, that would be awesome.

Thanks!

Update: I tried copying the content of nebular's menu folder and adding it to my app/@theme folder, plus configure the theme.module.ts file on my own.

After a lot of linking and dealing with error messages, I finally got it to work normally (like before I copy & pasted). However, I'm having trouble customizing it: nothing I add to my menu-item.component.html file gets applied!

[Css-IanM]

Can we just provide a component reference for the menu items and then reference the badge value from the data attribute via the menu item? This would be nice then we can use the service to update the menu and badges accordingly.

[dcruz1990]

Do i need to add Angular Material for this to work?