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

Answer 1

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, {{}}).