p-menu not showing up

Question

I'm currently testing primeng with angular 2 and I want to create a simple menu.

Here my code :

import {Component, OnInit} from '@angular/core';
import {Menu, MenuItem} from 'primeng/primeng';

@Component({
    templateUrl: 'app/salaries/menudroite.html',
    selector: 'menu-droite',
    providers: [],
   directives: [Menu]
})
export class menuDroiteComponent implements OnInit   {

  private items: MenuItem[];

  ngOnInit() {
        this.items = [{
        label: 'File',
        items: [
            {label: 'New', icon: 'fa-plus'},
            {label: 'Open', icon: 'fa-download'}
        ]
    },
    {
        label: 'Edit',
        items: [
            {label: 'Undo', icon: 'fa-refresh'},
            {label: 'Redo', icon: 'fa-repeat'}
        ]
    }];
  }

}

and the html code

<h4>Menu droite</h4>
<p-menu [model]="items"></p-menu>

When I launch the website nothing shows up. If I remove the "p-menu" line in the html, I see the "h4" ...

What am I doing wrong ?

if you open the webinspector what error appears? – Sergio Jul 19 '16 at 21:09 — Sergio, Jul 19 '16 at 21:09
Absolutly no error showed in the webinspector. – Vincent Caron Jul 20 '16 at 09:06 — Vincent Caron, Jul 20 '16 at 09:06

score 0 · Answer 1 · answered Jul 27 '16 at 18:54

0

Most probably you are missing list down menuitem in the list of directives, make it like this:

 directives: [Menu, MenuItem]

According to documentation here

Core of the api is MenuItem class that defines various options such as the label, icon and children of an item in a menu.

so you have to add MenuItem in the list of directives.

answered Jul 27 '16 at 18:54

Pardeep Jain

84,110
37
165
215

Its throws an error if you try to add MenuItem to the directives. Its nowhere mentioned in the documentation as well – lohiarahul Aug 04 '16 at 04:44
yeah you are right just tested on my machine, no need to add menuItems in the list of directives, but as per example given in documentation for me menu is working fine :) – Pardeep Jain Aug 04 '16 at 05:41

score 0 · Answer 2 · edited Oct 13 '16 at 16:43

0

I have been struggling with the same situation , I just can´t import MenuItem from primeng/primeng , I found the interface in the primeng/common folder, but for now I just declared the following.

private items: any[];

That´s it.

edited Oct 13 '16 at 16:43

BWA

5,672
7
34
45

answered Oct 13 '16 at 16:26

uajov6

413
7
13

score 0 · Answer 3 · answered Jan 11 '18 at 21:15

so mine works with

<p-menu #menu popup="popup" [model]="items"></p-menu>

and then the ts file is as follows just look at the imports and the onInit

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';

import { ServiceLocatorService } from '../../commonComponents/service/serviceLocator.service';

@Component({
    selector: 'productAdmin',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')]
})
export class AppComponent {

    items: MenuItem[];

    constructor(private locator: ServiceLocatorService) {
        var url: string = location.origin;
        this.locator.setUrl(url);
    }

    ngOnInit() {
        this.items = [
            { label: 'Product Definition', routerLink: ['/productSetup']},
            { label: 'Base Product Pricing', routerLink: ['/productPricing'] },
            { label: 'Base Option Pricing', routerLink: ['/optionPricing']}
            ];
    }
}

score 0 · Answer 4 · answered Nov 29 '21 at 16:50

Even though this is old: it could be 'The old forgot to add the module'. Like me don't forget to add it to the imports in your app.module.ts @NgModule like so:

...
...
import {MenuModule} from "primeng/menu";

        @NgModule({   
          declarations: [ ...],
          imports: [..., 
                    ..., 
                    MenuModule,
                    ...,
                    ...
    ],
    ....

For me, this was the issue. It failed silently and just didn't render anything.

This clued me in: https://www.geeksforgeeks.org/angular-primeng-menu-component/

p-menu not showing up

4 Answers4

Linked