PanelMenu

[djinx]

I cannot get the panelMenu to work. I downloaded the primeng-quickstart and tested it. Then I added the the sample from the documentation, but nothing shows up. No error, no menu, nothing.

my html file has

Code: Select all

<p-panelMenu [model]="items"></p-panelMenu>

my component has

Code: Select all

import {Component} from '@angular/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {PanelMenu, MenuItem} from 'primeng/primeng';

import { QuickReferenceComponent } from './quickref/quickref.component';
import { DocumentationComponent } from './doc/doc.component';

import { UserService } from './services/user.service';

@Component({
	selector: 'my-app',
	providers: [UserService],
	templateUrl: '/app/app.component.html',
	directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
	{ path: '/quick-ref',  component: QuickReferenceComponent, name: 'QuickRef', useAsDefault: true}
	,{path: '/doc',        component: DocumentationComponent, name: 'Doc'}
])


export class AppComponent {
    private items: MenuItem[];

    ngOnInit() {
    	console.log("ngOnInit");
        this.items = [
            {
                label: 'File',
                icon: 'fa-file-o',
                items: [{
                        label: 'New', 
                        icon: 'fa-plus',
                        items: [
                            {label: 'Project', url: '/doc'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            }
        ];
    

[cagatay.civici]

You also need to add it to directives;

Code: Select all

directives: [ROUTER_DIRECTIVES,PanelMenu]

[djinx]

Add the directive, now panelmenu shows up in rendered html as <p-panelmenu></p-panelmenu>

[cagatay.civici]

So is it working? Inside should be populated as well.

[djinx]

not working the inside is empty, all I get is <p-panelmenu></p-panelmenu>

[cagatay.civici]

What is your PrimeNG version?

[djinx]

Correction on the last post...

I get this in the rendered html

Code: Select all

<div class="ui-panelmenu ui-widget" id="ui-id-1">
            
        </div>

Versions are
"primeng": "1.0.0-beta.4",
"primeui": "4.1.9"

[djinx]

I tried grabbing the lastest primeng-quickstart and adding panelmenu to that.

package.json

Code: Select all

    "@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.6",
    "primeui": "4.1.11"

app.component.html

Code: Select all

<datatable-demos></datatable-demos>

<div class="ContentSideSections">
    <div class="Content100 overHidden TextShadow">
        <span class="fontSize30 TextShadow orange mediumFont marginBottom20 dispBlock">PrimeNG Sample with System.js</span>
        <span class="defaultText dispTable">This sample demonstrates a sample setup using System.js.</span>
    </div>
</div>

<div class="ContentSideSections Implementation">
	<p-panelMenu [model]="navItems"></p-panelMenu>
	
    <p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10" [responsive]="true">
        <header>CRUD for Cars</header>
        <p-column field="vin" header="Vin" [sortable]="true"></p-column>
        <p-column field="year" header="Year" [sortable]="true"></p-column>
        <p-column field="brand" header="Brand" [sortable]="true"></p-column>
        <p-column field="color" header="Color" [sortable]="true"></p-column>
        <footer><div class="ui-helper-clearfix" style="width:100%"><button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button></div></footer>
    </p-dataTable>

    <p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
        <div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad" *ngIf="car">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="vin">Vin</label></div>
                <div class="ui-grid-col-8"><input pInputText id="vin" [(ngModel)]="car.vin" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand">Year</label></div>
                <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.year" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand">Brand</label></div>
                <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.brand" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="color">Color</label></div>
                <div class="ui-grid-col-8"><input pInputText id="color" [(ngModel)]="car.color" /></div>
            </div>
        </div>
        <footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
                <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
            </div>
        </footer>
    </p-dialog>
</div>

app.component.ts

Code: Select all

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from '@angular/router';
import {InputText,DataTable,Button,Dialog,Column,Header,Footer,PanelMenu,MenuItem} from 'primeng/primeng';
import {Car} from './cars/car';
import {CarService} from './cars/carservice';

@Component({
	templateUrl: 'app/app.component.html',
	selector: 'my-app',
    directives: [InputText,DataTable,Button,Dialog,Column,Header,Footer,PanelMenu],
	providers: [HTTP_PROVIDERS,CarService,Router]
})
export class AppComponent {

	displayDialog: boolean;

    car: Car = new PrimeCar();

    selectedCar: Car;

    newCar: boolean;

    cars: Car[];

    constructor(private carService: CarService) { }
    private navItems: MenuItem[];
    
    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars = cars);
        console.log("ngOnInit");
        this.navItems = [
            {
                label: 'File',
                icon: 'fa-file-o',
                items: [{
                        label: 'New', 
                        icon: 'fa-plus',
                        items: [
                            {label: 'Project', url: '/doc'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            }
        ];       
    }

    showDialogToAdd() {
        this.newCar = true;
        this.car = new PrimeCar();
        this.displayDialog = true;
    }

    save() {
        if(this.newCar)
            this.cars.push(this.car);
        else
            this.cars[this.findSelectedCarIndex()] = this.car;

        this.car = null;
        this.displayDialog = false;
    }

    delete() {
        this.cars.splice(this.findSelectedCarIndex(), 1);
        this.car = null;
        this.displayDialog = false;
    }

    onRowSelect(event) {
        this.newCar = false;
        this.car = this.cloneCar(event.data);
        this.displayDialog = true;
    }

    cloneCar(c: Car): Car {
        let car = new PrimeCar();
        for(let prop in c) {
            car[prop] = c[prop];
        }
        return car;
    }

    findSelectedCarIndex(): number {
        return this.cars.indexOf(this.selectedCar);
    }
}

class PrimeCar implements Car {

    constructor(public vin?, public year?, public brand?, public color?) {}
}

Now the app won't boot as I get these errors

Code: Select all

EXCEPTION: TypeError: Cannot read property 'isSkipSelf' of null
browser_adapter.ts:78 EXCEPTION: TypeError: Cannot read property 'isSkipSelf' of nullBrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGroup @ browser_adapter.ts:89ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:341ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ ng_zone_impl.ts:67ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.ts:56ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:88 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'isSkipSelf' of null
browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'isSkipSelf' of null

[djinx]

If I leave Router out of the provider I get this error

Code: Select all

browser_adapter.ts:78 EXCEPTION: Error in ./PanelMenu class PanelMenu - inline template:13:20BrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGroup @ browser_adapter.ts:89ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:345ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ ng_zone_impl.ts:67ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:99NgZone.run @ ng_zone.ts:210ApplicationRef_.run @ application_ref.ts:335ApplicationRef_.bootstrap @ application_ref.ts:357(anonymous function) @ application_ref.ts:105ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ ng_zone_impl.ts:67ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.ts:56ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.ts:78 ORIGINAL EXCEPTION: No provider for Router!

[djinx]

so a little more experimenting and it seems the problem is with the Angular2 not being able to provide the router to sub-components. I tested this by changing panelmenu.ts to have the router set as an Input instead of injected through the constructor.

changes to panelmenu.ts

Code: Select all

    
//added
@Input() router: Router
    
    constructor() {}    
//    constructor(private router: Router) {}

my app.component.html looks the same

Code: Select all

<p-panelMenu [model]="navItems"></p-panelMenu>

I thought I would have had to set the router in the html like this

Code: Select all

<p-panelMenu [model]="navItems" [router]="router"></p-panelMenu>

but, ends up I don't and I'm not sure why. It works the same with or without the router in the html tag

While this is a problem with how Angular2 works and how PrimeNG expects it to work, a solution would be to make the router constructor changes setting router as @Input on all the ui components. At least that's my thought.