How to pass values as parameters to a function call inside onclick in Angular2 without ngClick?

Question

Angular2: I am trying to pass values from an *ngFor loop as a parameter to function call on the (click) attribute (since calling functions on onclick is not allowed for security reasons) event on my anchor tag.

Template Code:

<div *ngFor='let artist of artists'>
   <a (click)="alert({{artist.artist_id}})" href="#">{{artist.artist_name}}</a>
</div>

Compile Time error:

Got interpolation ({{}}) where expression was expected in [alert({{artist.artist_id}})]

Problem:

How do I pass the value of artist to the function call on (click)?

Any/All help appreciated! :)

Never use () or [] together with {{}}. Either one or the other but not together. (() and [] can be used together). — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 30, 2017 at 19:19
@GünterZöchbauer Thank you for that pointer! () and [] together always remind me of the sweet [(ngModel)]. — Kalpesh Mange
– Kalpesh Mange, Commented Jan 30, 2017 at 19:22
Yup, called banana-in-a box, in case you want to know :D - to not mix it up with box-in-a-banana which is invalid ;-) — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 30, 2017 at 19:23

Community · Accepted Answer · 2017-05-23 10:31:06Z

12

In your case, you don't need the double-curly braces since you are passing the variable to a function in a event binding click attribute, therefore you can remove those braces and it will work as expected:

<div *ngFor='let artist of artists'>
   <a (click)="alert(artist.artist_id)" href="#">{{artist.artist_name}}</a>
</div>

According to the relevant documentation, you only need to use interpolation when inserting a value between HTML element tags and within attribute assignments (not to be confused with event/property binding).

For instance, you would need to use interpolation for this direct src attribute assignment, otherwise the value would be interpreted as a string:

<img src="{{pathUrl}}" />

However, if you were to use property binding (i.e., [src] rather than src), it would be treated as a variable and the interpolation wouldn't be required:

<img [src]="pathUrl" />

The same would apply to event binding like in your case.

In other words, as stated by Günter in the comment above, you never need to use event/property binding, (i.e., ()/[]/[()]), together with variable interpolation, (i.e., double-curly braces, {{}}).

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jan 30, 2017 at 19:13

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalpesh Mange Over a year ago

Worked like a charm @Josh ! Thank you so much! Cheers. Happy Coding <3

Hajji Tarik · Accepted Answer · 2017-01-30 19:14:51Z

1

Simply by removing the interpolation and calling the alert(artist.artist_id)

answered Jan 30, 2017 at 19:14

Hajji Tarik

1,0827 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to pass values as parameters to a function call inside onclick in Angular2 without ngClick?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related