title: How to make PrimeNG Menubar component work?
body: <p>I'm trying to make a menubar using PrimeNG, based on example from <a href="http://www.primefaces.org/primeng/#/menubar" rel="nofollow noreferrer">http://www.primefaces.org/primeng/#/menubar</a></p>
  
  <p>I create something like this:</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {MenuBarComponent} from "./menubardemo.component";
  @Component({
    selector: 'my-app',
    template: `&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;&lt;demo&gt;&lt;/demo&gt;`,
    directives:[MenuBarComponent] })
  export class AppComponent { }
  </code></pre>
  
  <p><strong>menubardemo.components.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from "@angular/core";
  import {Menubar, MenuItem} from "primeng/primeng";
  @Component({
    selector: 'demo',
    template: `&lt;p-menubar [model]="items"&gt; &lt;/p-menubar&gt;`,
    directives: [Menubar] })
  export class MenuBarComponent implements OnInit {
    private items:MenuItem[];// you know how to fill this in the "OnInit" method
  
    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'
        }
      ];
    }
  }
  </code></pre>
  
  <p>after I checked out the data object is printed on the DOM, but the menubar is not showing.</p>
  
  <p>UPDATE: </p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" /&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/primeui/primeui-ng-all.min.js"&gt;&lt;/script&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" ",
      "docker-build": "docker build -t ng2-quickstart .",
      "docker": "npm run docker-build &amp;&amp; docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
      "pree2e": "npm run webdriver:update",
      "e2e": "tsc &amp;&amp; concurrently \"http-server\" \"protractor protractor.config.js\"",
      "lint": "tslint ./app/**/*.ts -t verbose",
      "lite": "lite-server",
      "postinstall": "typings install",
      "test": "tsc &amp;&amp; concurrently \"tsc -w\" \"karma start karma.conf.js\"",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings",
      "webdriver:update": "webdriver-manager update"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@angular/common":  "2.0.0-rc.1",
        "@angular/compiler":  "2.0.0-rc.1",
        "@angular/core":  "2.0.0-rc.1",
        "@angular/http":  "2.0.0-rc.1",
        "@angular/platform-browser":  "2.0.0-rc.1",
        "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
        "@angular/router":  "2.0.0-rc.1",
        "@angular/router-deprecated":  "2.0.0-rc.1",
        "@angular/upgrade":  "2.0.0-rc.1",
        "systemjs": "0.19.27",
        "es6-shim": "^0.35.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12",
        "angular2-in-memory-web-api": "0.0.7",
        "primeng": "1.0.0-beta.7",
        "primeui": "4.1.12"
    },
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.0",
      "typescript": "^1.8.10",
      "typings": "^1.0.4",
      "canonical-path": "0.0.2",
      "http-server": "^0.9.0",
      "tslint": "^3.7.4",
      "lodash": "^4.11.1",
      "jasmine-core": "~2.4.1",
      "karma": "^0.13.22",
      "karma-chrome-launcher": "^0.2.3",
      "karma-cli": "^0.1.2",
      "karma-htmlfile-reporter": "^0.2.2",
      "karma-jasmine": "^0.3.8",
      "protractor": "^3.3.0",
      "rimraf": "^2.5.2"
    },
    "repository": {}
  }
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    }
  }
  </code></pre>
  
  <p><strong>systemjs.config.js</strong></p>
  
  <pre><code>/**
   * System configuration for Angular 2 samples
   * Adjust as necessary for your application needs.
   */
  (function (global) {
  
    // map tells the System loader where to look for things
    var map = {
      'app': 'app', // 'dist',
  
      '@angular': 'node_modules/@angular',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      'rxjs': 'node_modules/rxjs',
      'primeng': 'node_modules/primeng'
    };
  
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
      'app': {main: 'main.js', defaultExtension: 'js'},
      'rxjs': {defaultExtension: 'js'},
      'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
      'primeng': {defaultExtension: 'js'}
    };
  
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
  
    // Individual files (~300 requests):
    function packIndex(pkgName) {
      packages['@angular/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
    }
  
    // Bundled (~40 requests):
    function packUmd(pkgName) {
      packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};
    }
  
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
  
    // No umd for router yet
    packages['@angular/router'] = {main: 'index.js', defaultExtension: 'js'};
  
    var config = {
      map: map,
      packages: packages
    };
  
    System.config(config);
  
  })(this);
  </code></pre>
  
  <p><strong>typings.json</strong></p>
  
  <pre><code>{
    "globalDependencies": {
      "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
      "core-js": "registry:dt/core-js#0.0.0+20160602141332",
      "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
      "node": "registry:dt/node#6.0.0+20160621231320",
      "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/x7K1R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x7K1R.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/M1DDr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M1DDr.png" alt="enter image description here"></a></p>