CODEWITHSUNDEEP
angulartypescriptprimeng
anupx73
anupx73

Reputation: 398

PrimeNG menu item command binding to base class function

I'm trying to bind a base class function to my Angular 2 PrimeNG menu items.

HTML

<p-menu #menu popup="popup" [model]="exportItems"></p-menu>
<button type="button" class="fa fa-download" title="Export As" (click)="menu.toggle($event)"></button>

Typescript

exportItems: MenuItem[];

//Inside NgOnInit
this.exportItems = [
{ label: 'SVG', command: super.ExportSVG },
{ label: 'PNG', command: super.ExportPNG }];

//Error here 
//Cannot read property 'canvasID' of undefined
ExportSvg(): void
{
    var canvas = document.getElementById(this.canvasID) as HTMLCanvasElement;
    .....

}

I think the base class function cannot be resolved while binding to a command. Any clues how to fix this?

Upvotes: 2

Views: 7883

Answers (1)

anupx73
anupx73

Reputation: 398

Well I solved this by following command binding.

this.exportItems = [
{ label: 'SVG', command: (onclick)=> {super.ExportSVG()} },
{ label: 'PNG', command: (onclick)=> {super.ExportPNG()} }];

It seems that when binding the onClick event of menu item it works fine.

Upvotes: 4

Related Questions