Angular2 - click event: get ID of clicked element

Question

I have an overview of charts (primeng) and now I need to know if it is possible to get the ID from a chart when its clicked.

FYI I have a contextmenu which contains "open in new tab" and I need the ID from the chart the contextmenu opened on.

Rightclick -> getID from chart -> use ID to open new Tab with only that chart being displayed.

I've seen some stuff like event.target.attributes.id /event.currenttarget, but that's js, right? I am using Typescript.

So the question is actually that simple: How would I be able to do this?

I am a newbie to everything related to programming, I acutally started a few weeks ago, so please be patient as I might not be able to understand everything as quick as others would.

Edit:

MenuItems for context menu:

this.ctitems = [
    {
        label: 'Öffnen(neuer Tab)',
        icon: 'fa-plus',
        command: (onClick) => {this.function()}                
    },
    {
        label: 'Öffnen(dieser Tab)',
        icon: 'fa-hand-o-down'

    }
];

function to get id

function() { event.target.getID <- problem }

As soon as I have the ID I want to push an item specified by the ID into an array of items displayed in a TabMenu. But thats future. Now I just need to get the ID.

html:

<p-chart height="100" width="100" class="ui-g-2 " type="line" id="linechart" [data]="ntwdata"></p-chart>
<p-contextMenu id="cm" [model]="ctitems"></p-contextMenu>

Please add the code that shows what you try to accomplish and what you have tried. — Günter Zöchbauer, Jun 15 '16 at 09:06
You can use whatever works in JS in TypeScript too, since TypeScript is just a superset of JS. — Maximilian Riegler, Jun 15 '16 at 09:16
I tried to use the stuff in the correct answer from this question, but it didnt work out. http://stackoverflow.com/questions/36006894/angular2-get-clicked-element-id — Faigjaz, Jun 15 '16 at 09:18

Maximilian Riegler · Accepted Answer · 2016-06-15T09:36:23.240

5

You're not passing the event variable to your function, so you can't use it.

Define your command like this, then it should work:

this.ctitems = [
    {
        label: 'Öffnen(neuer Tab)',
        icon: 'fa-plus',
        command: (event) => onClick(event)                
    },
    {
        label: 'Öffnen(dieser Tab)',
        icon: 'fa-hand-o-down'

    }
];

[...]

onClick(event) {
    let target = event.target || event.srcElement || event.currentTarget;
    let idAttr = target.attributes.id;
    let id = idAttr.nodeValue;
    console.log(id);
}

edited Jun 15 '16 at 09:36

answered Jun 15 '16 at 09:17

Maximilian Riegler

22,720
4
62
71

I'm getting "error TS7006: Parameter 'event' implicitly has an 'any' type" Do I have to declare event? Or Import anything? – Faigjaz Jun 15 '16 at 09:44
You can add variable type ":any". `onClick(event: any)`. – Maximilian Riegler Jun 15 '16 at 09:52
1

Alright, the error is gone, but the console doesn't show any ID. Is it a problemt, that the click event actually is performed on the contextmenu? Because I'm clicking the contextmenu Item and then the function gets called. – Faigjaz Jun 15 '16 at 09:57
You can try a `console.log(event)` to check out the event object. – Maximilian Riegler Jun 15 '16 at 10:19
1

Yep, it's actually registering the click on the menu, not on the chart. I will try another way to get done what I want by event binding on the chart directly. But thanks for your efforts! This will be a big help furtheron into my app. – Faigjaz Jun 15 '16 at 10:28

Angular2 - click event: get ID of clicked element

1 Answers1