CODEWITHSUNDEEP
angularprimeng
Lempkin
Lempkin

Reputation: 1588

How to use template in PrimeNG panelMenu

I need to add some html code in menu entries so I try to use to custom the display :

My template :

<p-panelMenu styleClass="main-menu" class="main-menu" [model]="menus">
    <ng-template let-menus pTemplate>
        {{menus.label}} <span>otherStuff</span>
    </ng-template>
</p-panelMenu>

The component :

this.menus = [
        {
          label: 'Dashboard',
          icon: 'fa-home',
          routerLink: '/home'
        },
    ...

Nothing happen and it still display the menu as if I didn't add the template. What do I miss?

Upvotes: 5

Views: 5051

Answers (2)

Himanshu Arora
Himanshu Arora

Reputation: 2568

As of the current implementation, you can't. One option is to override the component and add that functionality yourself.

Upvotes: 2

Chandru
Chandru

Reputation: 11184

you can't use inside the p-panelMenu so try below like this :

try this : 

<p-panelMenu styleClass="main-menu" class="main-menu" [model]="menus">
</p-panelMenu>

component.ts

export class AppComponent implements AfterViewInit {
    menus: MenuItem[];

    constructor(
    ) {

        this.menus = [{
            label: 'Dashboard',
            icon: 'fa-home',
            routerLink: '/home'
        }]
    }

    ngAfterViewInit() {
        let element1 = document.createElement('span')
        let element2 = document.createTextNode('otherStuff');
        element1.appendChild(element2)
        let d1 = document.getElementsByClassName('ui-menuitem-text')[0].appendChild(element1);
    }
}

Upvotes: 0

Related Questions