Badge on side menu

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
IESI
Posts: 1
Joined: 02 Feb 2023, 12:23

28 Mar 2023, 14:10

Hello,

Is it possible to apply badge on the side menu of Apollo ?

Thank you

gucal
Posts: 50
Joined: 06 Sep 2022, 08:45

30 Mar 2023, 09:24

Hi,

This is possible.

Sample code for you:

`app.menu.component.ts`

Code: Select all

 this.model = [
            {
                label: 'Dashboards',
                icon: 'pi pi-home',
                items: [
                    {
                        label: 'E-Commerce',
                        icon: 'pi pi-fw pi-home',
                        routerLink: ['/'],
                        badge: 3
                    },
                    {
                        label: 'Banking',
                        icon: 'pi pi-fw pi-image',
                        routerLink: ['/dashboard-banking'],
                        badge: 4,
                    }
                ]
            },
]
`app.menuitem.component.ts`

Code: Select all

 <a
        *ngIf="item.routerLink && !item.items && item.visible !== false"
        (click)="itemClick($event)"
        (mouseenter)="onMouseEnter()"
        [ngClass]="item.class"
        [routerLink]="item.routerLink"
        routerLinkActive="active-route"
        [routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
        [fragment]="item.fragment"
        [queryParamsHandling]="item.queryParamsHandling"
        [preserveFragment]="item.preserveFragment"
        [skipLocationChange]="item.skipLocationChange"
        [replaceUrl]="item.replaceUrl"
        [state]="item.state"
        [queryParams]="item.queryParams"
        [attr.target]="item.target"
        tabindex="0"
        pRipple
        [pTooltip]="item.label"
        [tooltipDisabled]="!(isSlim && root)"
    >
        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
        <span class="layout-menuitem-text">{{ item.label }}</span>
        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
        <p-badge *ngIf="item.badge" [value]="item.badge"></p-badge>
    </a>
Aliriza Gucal
PrimeNG Core Developer

Post Reply

Return to “Apollo - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest