Hello,
Is it possible to apply badge on the side menu of Apollo ?
Thank you
Badge on side menu
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi,
This is possible.
Sample code for you:
`app.menu.component.ts`
`app.menuitem.component.ts`
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,
}
]
},
]
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
PrimeNG Core Developer
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest