search

akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Add badge to nbMenu/ side menu #1029

Open akshayhandoo opened 5 years ago

akshayhandoo commented 5 years ago

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 commented 5 years ago

+1

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

akshayhandoo commented 5 years ago

+1

I'm also looking for the same feature. KIndly reply capture @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 commented 5 years ago

thanks @akshayhandoo .. its help me

mohamohamoha commented 5 years ago

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 commented 5 years ago

any one have solution?

parthgodhani commented 5 years ago

+1 I'm also looking for the same feature. KIndly reply capture @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 commented 5 years ago

+1 I'm also looking for the same feature. KIndly reply capture @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 commented 4 years ago

+1 I'm also looking for the same feature. KIndly reply capture 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:

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 commented 4 years ago

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 commented 4 years ago

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