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

Use ngClass to combine a function call with a basic string in Angular

Currently, I am working with Angular and facing an issue while attempting to generate multiple div elements using ngFor. All the divs share the same class obtained from a function call, with the last div having an additional 'no-margin' class. T ...

angular

What is the reason behind the Typescript compiler not converting .ts files to .js files automatically?

Displayed below are the folders on the left showcasing my Typescript file in /src (blue) compiled into Javascript in /dist (purple) using tsc. https://i.stack.imgur.com/7XNkU.png In the source file on the left, there is a reference to a .ts module file t ...

javascriptnode.jstypescriptnpmtsc

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

Managing multiple asynchronous requests through Observables in web development

I am working on an Angular2 website that sends multiple ajax requests using Json Web Tokens for authorization when it is initialized Here are two examples: public getUser(): Observable<User> { // Code block to get user data } public getFriends ...

ajaxangulartypescriptrxjs

Trouble incorporating SCSS color variables into Angular component_IMPORT issue

My Angular 9 app has a folder structure that includes: | app | app.component.ts | app.component.html | app.component.scss | assets | _colors.scss The _colors.scss file contains definitions for two colors: $red: #DA0000; $blue: #1080E1; In the a ...

angularsassangular9

A helpful guide on integrating a Google font into your Next.js project using Tailwind CSS locally

I'm planning to use the "Work Sans" Font available on Google Fonts for a website I'm working on. After downloading the "WorkSans-Black.ttf" file, I created a subfolder named "fonts" within the "public" folder and placed the font file in there. Be ...

javascriptreactjstypescriptnext.jstailwind-css

Setting limits to disable or remove specific times from the time picker input box in Angular

I'm having trouble with a time input box. <input type="time" min="09:00" max="18:00" \> Even though I have set the min and max attributes to values of 09:00 and 18:00 respectively, it doesn't seem to be working properly. I want to ...

javascripthtmlangulartypescript

Files are nowhere to be found when setting up an angular project

After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...

htmlcssangulartypescript

What is the best way to dynamically update styleUrls or style properties in Angular?

One of my goals is to give users the ability to customize colors and certain styles within my Angular application. I am thinking about creating a structure like this: Structure: component-one   folder-with-css-files     style-for-component-1-fo ...

cssangularstyled-components

The Conundrum of Angular 5 Circular Dependencies

I've been working on a project that involves circular dependencies between its models. After reading through this StackOverflow post and its suggested solutions, I realized that my scenario might not fit into the category of mixed concerns often assoc ...

angulartypescriptangular5circular-dependency

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

javascriptarrayshtmlangulartypescript

Event callback type narrowing based on the specific event key

While exploring different approaches to create a type-safe event emitter, I came across a pattern where you start by defining your event names and their corresponding types in an interface, as shown below: interface UserEvents { nameChanged: string; ...

typescript

Displaying a dynamic array in Angular that shows all results, not just the data under a

Trying to grasp the complexities of Angular 5, I am faced with a challenge. The code successfully passes the "id" number from the array to the URL, but when accessing model/1, all objects from the array are displayed instead of just the object under id 1. ...

arraysangulardynamicangular-activatedroute

Introducing an extra 'pipe' in rxjs angular may result in generating errors

Encountering an unusual issue with Angular. The following code functions correctly: this.form.valueChanges .pipe( startWith(this.form.value), pairwise(), tap(() => console.log('aa')) ...

angulartypescriptrxjs

Enhancing search capabilities in Angular 8.1.2 by filtering nested objects

I am in need of a filter logic similar to the one used in the example posted on this older post, but tailored for a more recent version of Angular. The filtering example provided in the older post seems to fit my requirements perfectly, especially with ne ...

angulartypescriptangular-filtersangular-pipe

What steps can I take to troubleshoot and resolve the error occurring during the construction of my Angular application?

I encountered an error with the sass-loader while developing my Angular application. Despite attempting to update the sass-loader dependency, I was unable to resolve the issue. Can anyone offer assistance? Here is all the relevant information: Operating ...

node.jsangularnpmsass

How can animations be disabled in Angular/Javascript?

I have been assigned the task of developing an Angular component for my company's applications that will include a toggle to disable all animations within the app for accessibility purposes. It is important to note that I am unable to go into each in ...

javascriptangularanimationaccessibility

What steps can be taken to eliminate the 404 error when refreshing an Angular 8 Single Page Application (SPA) without using

In my single page application project, I am utilizing Angular 8. Upon uploading my published code to the IIS server without using hash(#) in routing, I encounter a 404 error when attempting to refresh the page. Can anyone provide assistance on how to res ...

angulartypescript

Exploring Architectural Designs in Angular2: Redux, Flux, Reactivity, RxJS, Ngrx, MVI, and More

Isn't it annoying how all these library and framework names start with R/N or sound so similar? react/redux | flux | ngrx | @ngrx/store | RxJS/ReactiveX | MVI | .... Can anyone make sense of this chaos? I'm trying to understand, please help me ...

reactjsangularreduxrxjsngrx

Is there a way to ensure an ajax call finishes executing without relying on 'async: false' or callbacks?

In my view, I have implemented a TypeScript code defining a KnockoutJS binding handler for a clickable element as shown below: module MyModule { export interface ICopyButtonParams { dataUrl: string; } ko.bindingHandlers.copyButton = { ...

ajaxasynchronousknockout.jstypescriptclipboard.js