How to add badges to PrimeNG panelMenu MenuItem's

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)
    }
  }

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);
}

When I tried this solution. I am getting this error.
ERROR DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

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.

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

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?

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.