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! :)

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! :)

• javascript
• angular

• Never use () or [] together with {{}}. Either one or the other but not together. (() and [] can be used together). – 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 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 Commented Jan 30, 2017 at 19:23

2 Answers 2

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 ment above, you never need to use event/property binding, (i.e., ()/[]/[()]), together with variable interpolation, (i.e., double-curly braces, {{}}).

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