Passing Variable as parameter in onclick method in Angular

Question

I am writing a html in where the html will display a list of records with three fields - id, name and an icon. When the icon will be clicked by user, a method will be called where the id will be passed as parameter and details of that record will be returned. The code snipped I am following is as below -

<tr *ngFor="let userDetail of userDetails">
                  <td>{{ userDetail.id }}</td>
                  <td>{{ userDetail.firstname }}  {{userDetail.lastname}}</td>
                  <td><a href="javascript:void(0);" (click) = "showUserDetails()" ><img src="/assets/user_details.png" width="20" height="20" /></a></td>
                </tr>

Here I need to pass the userDetail.id when the showUserDetails() function will be created. But still unable to pass the parameter. What will be best way to pass that parameter? Thanks in advance.

I don't know Angular from squat so I probably shouldn't even comment, but I can't stop myself!! Would it not be: (click) = "showUserDetails({{ userDetail.id }})" — Rob Moll
– Rob Moll, Commented Mar 13, 2020 at 11:22

Marian Klösler · Accepted Answer · 2020-03-14 13:22:16Z

4

You have to make sure:

You are passing the value into the method:(click) = "showUserDetails(userDetails.id)"
The method should be declared in the same component otherwise you have to bind e.g. the service it's implented in within a public variable in the components constructor.

I created a simple stackblitz project. that may can help you.

edited Mar 14, 2020 at 13:22

answered Mar 13, 2020 at 11:41

Marian Klösler

6789 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Passing Variable as parameter in onclick method in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related