Utilizing PrimeNG menu items to bind commands to a base class function

I'm struggling to connect a parent class function with my Angular 2 PrimeNG menu options.

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[];

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

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

}

It appears that the parent class function is not accessible when trying to bind to a command. Any ideas on how to resolve this issue?

angulartypescriptprimeng

Answer №1

My solution to this issue involved implementing command binding.

this.exportItems = [
{ label: 'JPEG', command: (onclick)=> {super.ExportJPEG()} },
{ label: 'PDF', command: (onclick)=> {super.ExportPDF()} }];

Upon binding the onClick event of the menu item, everything started working smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to store a logged-in user's email in a React

I have implemented a login API and I would like to save the email of the logged-in user in the state or another variable, so that I can display it in the header after successful login. The user's email is located in the data.email. The following code ...

reactjstypescriptapireact-hooksnext.js

The functionality of Ionic's infinite scroll feature is limited due to its dependence on the window object

The issue at hand is that the scrolling functionality within the div is not connected to the window, resulting in no action when the user scrolls. While infinite scrolling works flawlessly in a scrollable window, I require a specific connection to the scro ...

angularionic-frameworkionic2

Issue encountered in node_modules/@ngrx/store/src/models.d.ts(58,58): TypeScript error TS2304 - Unable to locate identifier 'unknown'

I am currently exploring the implementation of the REDUX Pattern in my upcoming Angular project, but I am facing issues with importing the necessary libraries. ERROR in node_modules/@ngrx/store/src/models.d.ts(58,58): error TS2304: Cannot find name &apo ...

angularrxjsngrx

Issue during Docker build: npm WARN EBADENGINE Detected unsupported engine version

Currently, I am constructing an image based on mcr.microsoft.com/devcontainers/python:0-3.11-bullseye. In my docker file, I have included the following commands towards the end: RUN apt-get update && apt-get install -y nodejs npm RUN npm install np ...

node.jstypescriptnpm

"Encountering a module not found issue while trying to

Attempting to test out 3 node modules locally by updating their source locations in the package.json files. The modules in question are sdk, ng-widget-lib, and frontend. ng-widget-lib relies on sdk, while frontend depends on ng-widget-lib. To locally build ...

node.jsangulartypescriptnpm

Could there be an issue with the way I've implemented my setInterval function?

I am currently in the process of developing a stopwatch feature using React Native and implementing the setInterval function to increase a counter and update the state accordingly: Play Function (triggered upon pressing the play button) const [isRunning ...

reactjstypescriptreact-native

Retrieving information as the user navigates to the next page

Currently, I am using an API endpoint that retrieves over 1000 data objects and delivers them to the user. I believe this method is not efficient since only 30 objects are displayed at once. Is there a more efficient way to load these objects, perhaps in ...

angularngx-datatable

Encountering an emscripten error when using MediaInfo.js with Angular 16

Trying to integrate mediainfo.js with Angular 16 based on the documentation found at https://github.com/buzz/mediainfo.js. Following the documentation, we have installed the necessary dependencies : Installation : "@types/emscripten": "^1. ...

angularemscriptenmediainfo

Remove an element from an array within objects

Need help with removing specific items from an array within objects? If you want to delete all hobbies related to dancing, you may consider using the splice method const people = [{ id: 1, documents: [{ ...

javascriptarraystypescriptobjectsplice

Before accessing the page, please ensure to make a double request

Encountered a weird issue, While inspecting the network tab in Chrome devtools, I noticed that my Vue app is making double requests to the same endpoint :/ Here's a snippet of my code: In the router section, I have a beforeEach function. When I navig ...

javascripttypescriptvue.jsvuex

Include quotation marks around a string in C# to convert it into JSON format

I am utilizing a service that operates with JSON format. However, the JSON data I am receiving does not include double quotes around keys and values. Here is an example of the data I have: [{name:{buyerfirstname:Randy, buyermiddlename:null, buyerlastnam ...

javascriptc#typescript.net-corejson.net

The issue I'm facing with the mongoose schema.method is that the TypeScript error TS2339 is showing up, stating that the property 'myMethod' does not exist on type 'Model<MyModelI>'

I am looking to integrate mongoose with TypeScript and also want to enhance Model functionality by adding a new method. However, when I try to transpile the file using tsc, I encounter the following error: spec/db/models/match/matchModelSpec.ts(47,36): e ...

typescriptmongoose

Error in TypeScript: Gulp + Browserify combination is not yielding the expected type

I keep encountering an error whenever I try to run this script. The error message I receive is: -> % gulp compile-js [22:18:57] Using gulpfile ~/wwwdata/projects/site/gulpfile.js [22:18:57] Starting 'compile-js'... events.js:141 th ...

typescriptgulpbrowserify

Break down the provided Array type into distinct new types

If we have a specific type defined as: type Tuple = [name: string, age: number, address: string]; and we are interested in creating a new type without the first element, like this: type NewTuple = [age: number, address: string]; Is there a way to achieve ...

typescript

Unable to access NgForm.value in ngAfterViewInit phase

In my template driven form, I need to save the initial values of controls. Initially, I thought that using the ngAfterViewInit method would be ideal since it is called after the template is rendered, allowing me to access and store the value of form contro ...

angular

What is the process for generating an array of objects using JavaScript?

I am struggling to create an array of objects using JavaScript and facing errors with new lines added where I need to split the messages and collect row numbers. The row numbers should be comma-separated if it is a repetitive error message. I found a solu ...

javascriptjsonregextypescriptangular6

Utilizing TypeScript/React to Access Data from an Excel Spreadsheet

Hey there! I've been working on a Single-Page-Application with Typescript and React, and now I need to read data from an Excel sheet. The xlsx Library (npm) seems to be the way to go, but I'm having trouble getting it to work. Can anyone offer an ...

excelreactjstypescript

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Currently, I am integrating the community js library version of jsplumb with my Angular 5 application (Angular CLI: 1.6.1). Upon my initial build without any modifications to tsconfig.json, I encountered the following error: ERROR in src/app/jsplumb/jspl ...

javascripttypescriptnpmangular-cliangular5

Installing and importing Angular Google Maps in an Angular 2 application using TypeScript: A step-by-step guide

Can you provide step-by-step instructions on integrating angular-google-maps into an Angular 2 application and importing it for use in a TypeScript component? ...

typescriptangularangular-google-maps

Issue: formGroup requires an input of type FormGroup. Please provide one; Error: Unable to access property 'controls' as it is undefined

In the process of building a login and registration form using Angular with .Net core, I encountered an error upon running the program. The error is showing up in the Browser Console tab. This is my userlog.component.ts file: import { Component, OnInit, O ...

angulartypescriptasp.net-core.net-core