angular pass parameters to calling function

Question

I have hyperlink with id parameter

<a [routerlink]="[]" class="someclass" id="12">test</a>

In script I add function call to this element by this

this.elementRef.nativeElement.querySelector('.someclass').addEventListener('click', this.someFunc.bind(this));

this is someFunc

   someFunc(param){
     console.log('someFunc: '+param);
   }

When I run app and press that link I get this in console:

someFunc: [object MouseEvent]

How can I send 'id' param of hyperlink to that function ?

Trying solution from Aakash Garg

this.elementRef.nativeElement.querySelector('.someclass').addEventListener('click', (e) => this.someFunc(e.target.id));

For testing printing out straght:

(e) => console.log('test: '+e.target.class) > prints out test: undefined
 (e) => console.log('test: '+e.target.id) > prints out test:

Why did you not simply use `(click)="someFunc()"`? – Bojan Kogoj Jun 03 '20 at 13:38 — Bojan Kogoj, Jun 03 '20 at 13:38

Aakash Garg · Accepted Answer · 2020-06-03T14:11:05.513

1

this.elementRef.nativeElement.querySelector('.someclass').addEventListener('click', (e) => this.someFunc(e.id));

edited Jun 03 '20 at 14:11

answered Jun 03 '20 at 13:41

Aakash Garg

10,649
2
7
25

Answer seems to be the right one, but somehow nothing transfers to the function. – David Jun 03 '20 at 13:47
I've tried directly this 'click', (e) => console.log('test: '+e.target.id) Nothing prints out. Can u check ? – David Jun 03 '20 at 13:50
(e) => console.log('test: '+e.target.class) > prints out test: undefined (e) => console.log('test: '+e.target.id) > prints out test: – David Jun 03 '20 at 13:53
Care to explain why you would not use an in-built feature of angular but rather work around it? – Philipp Meissner Jun 03 '20 at 13:55
you didn't gave id to your element. – Aakash Garg Jun 03 '20 at 13:55
@Philipp Meissner , sorry Philipp but I make html component dinamically with calls to backend , with asincron, with safeHTML and etc etc etc... – David Jun 03 '20 at 13:57
console log e? what's in e? – Aakash Garg Jun 03 '20 at 13:59
'click', (e) => console.log('test: '+e) gives > [object MouseEvent] – David Jun 03 '20 at 14:03
do it in chrome? or print while json.stringify it? – Aakash Garg Jun 03 '20 at 14:04
in chrome. made straight alert(). gives the same test: [object MouseEvent] – David Jun 03 '20 at 14:07
console.log(JSON.stringify(e)); – Aakash Garg Jun 03 '20 at 14:09
console log e.id – Aakash Garg Jun 03 '20 at 14:09
{"isTrusted":true} – David Jun 03 '20 at 14:19
https://stackoverflow.com/questions/41609937/how-to-bind-event-listener-for-rendered-elements-in-angular-2 – Aakash Garg Jun 03 '20 at 14:27
I've analysed the e and got the right path e.path[1].id this is what I wanted. Thanks for your solution, works perfect! – David Jun 03 '20 at 14:28

Philipp Meissner · Answer 2 · 2020-06-03T13:56:54.040

-1

You can use an angular click-handler. Adding event listeners the way you did has the problem that it may run outside of angular zone and cause problems.

<a [routerlink]="[]" class="someclass" (click)="someFunc('12')" id="12">test</a>

edited Jun 03 '20 at 13:56

answered Jun 03 '20 at 13:38

Philipp Meissner

5,273
5
34
59

angular pass parameters to calling function

2 Answers2