primeng p-menubar example not working

Question

I am getting the following error. It is telling me that it can't bind the 'model' since it is not known by the 'p-menubar'.

I am very new with angular and primeng. Can someone help me?

Error: Template parse errors: Can't bind to 'model' since it isn't a known property of 'p-menubar'. 1. If 'p-menubar' is an Angular component and it has 'model' input, then verify that it is part of this module. 2. If 'p-menubar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][model]="items"> "): ng:///AppModule/AppComponent.html@1:23 'p-menubar' is not a known element: 1. If 'p-menubar' is an Angular component, then verify that it is part of this module. 2. If 'p-menubar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///AppModule/AppComponent.html@1:12 Evaluating http://localhost:3000/main.js Loading main.js Stack trace: syntaxError@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34 TemplateParser.prototype.parse@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:12967:19 JitCompiler.prototype._compileTemplate@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27161:18 JitCompiler.prototype._compileComponents/<@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27080:56 JitCompiler.prototype._compileComponents@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27080:9 JitCompiler.prototype._compileModuleAndComponents/<@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:26967:13 then@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1718:92 JitCompiler.prototype._compileModuleAndComponents@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:26966:16 JitCompiler.prototype.compileModuleAsync@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:26895:32 PlatformRef_.prototype._bootstrapModuleWithZone@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4568:16 PlatformRef_.prototype.bootstrapModule@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4554:16 @http://localhost:3000/main.js:4:1 @http://localhost:3000/main.js:1:31 @http://localhost:3000/main.js:1:2 evaluate@http://localhost:3000/node_modules/systemjs/dist/system.src.js:2843:8 translateAndInstantiate/http://localhost:3000/node_modules/systemjs/dist/system.src.js:3608:21 dynamicExecute@http://localhost:3000/node_modules/systemjs/dist/system.src.js:1166:18 doEvaluate@http://localhost:3000/node_modules/systemjs/dist/system.src.js:1113:13 ensureEvaluate@http://localhost:3000/node_modules/systemjs/dist/system.src.js:1022:13 RegisterLoader$1.prototype[Loader.resolveInstantiate]/http://localhost:3000/node_modules/systemjs/dist/system.src.js:612:14 ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:392:17 Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:142:24 scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:844:52 ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17 Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28 drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:602:25 k/http://localhost:3000/node_modules/core-js/client/shim.min.js:8:31581 k/<@http://localhost:3000/node_modules/core-js/client/shim.min.js:8:31451 s@http://localhost:3000/node_modules/core-js/client/shim.min.js:7:25990 localhost:3000:22:53

This is the app.component.ts code:

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

@Component({
  selector: 'my-app',
  template: `
            <p-menubar [model]="items">
                <input type="text" pInputText placeholder="Search">
                <button pButton label="Logout" icon="fa-sign-out"></button>
            </p-menubar>
  `
//   templateUrl: './app/app.component.html'
})
export class AppComponent { 

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                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'}
                ]
            }
        ];
    }
}

This is the app.module.ts:

    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

DenisMP DenisMP · Accepted Answer · 2017-09-26T16:50:56

I found the problem. The "import { MenubarModule, MenuItem } from 'primeng/primeng';" needs to be in the app.module.ts, not in the app.component.ts.

primeng p-menubar example not working

1 Answers