Skip to content

Instantly share code, notes, and snippets.

@taylor8294

taylor8294/mypanelmenu.component.ts

Created February 4, 2019 20:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save taylor8294/218bb2fca75c89064b8575f7c9f0352b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save taylor8294/218bb2fca75c89064b8575f7c9f0352b to your computer and use it in GitHub Desktop.
Download ZIP
How to add badges to PrimeNG panelMenu MenuItem's
Raw
mypanelmenu.component.ts
/**
* Usage: just add "add-badge-X badge-class-Y" to the icon proporty of the item.
* Where "X" is any content for the badge (eg. "add-badge-1" "add-badge-unread-mail" "add-badge-!" etc) can use anything
* separate words with a dash ("-") and if you want to use a dash in the badge content just escape it with a backslash
* (eg "add-badge-ages-16\\-24").
* Where "Y" is any Bootstrap style class (eg. "info", "danger", etc)
* Requires bootstrap/_badges.scss
*/
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { PanelMenuModule } from 'primeng/panelmenu';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-mypanelmenu',
templateUrl: `<p-panelMenu id="sidenav" [model]="items" escape="false"></p-panelMenu>`,
styleUrls: ['./mypanelmenu.component.scss']
})
export class MyPanelMenuComponent implements OnInit, AfterViewInit {
constructor() { }
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'Menu item',
icon: 'pi pi-pw pi-file add-badge-content badge-class-info'
}
]
}
ngAfterViewInit(){
this.addBadges()
}
addBadges(){
let els = document.querySelectorAll('[class*=add-badge-]')
for(let el of Array.from(els)){
let matches = el.className.match(/add-badge-(\S+)/)
let badgeVal = matches ? matches[1] : ''
let badgeText = badgeVal.replace(/\\\-/g,'__dash__').replace(/\-/g,' ').replace('__dash__','-')
let badgeTextNode = document.createTextNode(badgeText)
matches = el.className.match(/badge-class-(\S+)/)
let badgeClass = matches ? matches[1] : 'danger'
let badge = document.createElement('span')
badge.classList.add('badge')
badgeClass && badgeClass !== 'none' ? badge.classList.add('badge-'+badgeClass) : null
badge.appendChild(badgeTextNode)
el.nextSibling.appendChild(badge)
el.classList.remove('add-badge-'+badgeVal, 'badge-class-'+badgeClass)
}
}
Raw
styles.scss
// Enable badges in menu items
.ui-panelmenu-header, .ui-menuitem {
position: relative;
}
.ui-menuitem-text .badge{
position: absolute;
right: 1.5em;
top: 1.4em;
top: calc(0.714em + 7px);
}
@taylor8294
Copy link
Author

taylor8294 commented Apr 3, 2020 •
edited
Loading

This was written to work with PrimeNG 7.0.5 early last year, if this hack is still needed and hasn’t been made into a standard feature of the library yet, it sounds like it will need tweaking to work with latest versions. Off the top of my head, try changing el.nextSibling.appendChild at the bottom of the component to just el.appendChild, see if that fixes you’re problem.

@dileep1484
Copy link

dileep1484 commented Apr 3, 2020

Yes.. el.appendChild works.
Thank you :)

@Lavaei
Copy link

Lavaei commented Sep 14, 2020

It seams PrimeNG adds a neat way to do it. But even when I set badge and badgeStyleClass to the menu item's model, nothing happen! Is there anyone who used this feature?

@chasestory
Copy link

chasestory commented May 18, 2021

I am having the same problem, and paid for premium "designer", the documentation is lacking with numerous components... Don't reference the menuModel if you can't actually use all the options with it... be explicit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment