Menubar Problem

[zho]

I'm Trying to make a menubar using PrimeNG, based on example from http://www.primefaces.org/primeng/#/menubar

i create something like this:

app.component.ts

Code: Select all

import {Component} from '@angular/core';

import { MenubarDemo } from "./menubardemo.component";

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><p-menubar [model]="items"></p-menubar>'
})

export class AppComponent {
  items = new MenubarDemo();
}

menubardemo.components.ts

Code: Select all

import {MenuItem} from "primeng/primeng";

export class MenubarDemo {

  private items: MenuItem[];

  ngOnInit() {
    this.items = [
      {
        label: 'File',
        icon: 'fa-file-o',
        items: [{
          label: 'New',
          icon: 'fa-plus',
          items: [
            {label: 'Project'},
            {label: 'Other'},
          ]
        },
          {label: 'Open'},
          {label: 'Quit'}
        ]
      },
      {
        label: 'Edit',
        icon: 'fa-edit',
        items: [
          {label: 'Undo', icon: 'fa-mail-forward'},
          {label: 'Redo', icon: 'fa-mail-reply'}
        ]
      },
      {
        label: 'Help',
        icon: 'fa-question',
        items: [
          {
            label: 'Contents'
          },
          {
            label: 'Search',
            icon: 'fa-search',
            items: [
              {
                label: 'Text',
                items: [
                  {
                    label: 'Workspace'
                  }
                ]
              },
              {
                label: 'File'
              }
            ]}
        ]
      },
      {
        label: 'Actions',
        icon: 'fa-gear',
        items: [
          {
            label: 'Edit',
            icon: 'fa-refresh',
            items: [
              {label: 'Save', icon: 'fa-save'},
              {label: 'Update', icon: 'fa-save'},
            ]
          },
          {
            label: 'Other',
            icon: 'fa-phone',
            items: [
              {label: 'Delete', icon: 'fa-minus'}
            ]
          }
        ]
      },
      {
        label: 'Quit', icon: 'fa-minus'
      }
    ];
  }
}

after i checked out the data object is printed on the DOM, but the menubar not showing.

[maipucino]

items should be an array of menuitems. When you say " items = new MenubarDemo();" you are assigning an MenubarDemo object to "items" instead of contained items array. it should be somethng like

Code: Select all

items = new MenubarDemo().items 

after making items public.

[zho]

items should be an array of menuitems. When you say " items = new MenubarDemo();" you are assigning an MenubarDemo object to "items" instead of contained items array. it should be somethng like

Code: Select all

items = new MenubarDemo().items 

after making items public.

Not working, so? what should it printed? in model? in html?