Assign variable value from another component in *ngFor by click in angular 2

Question

I trying in *ngFor pass object to another component, but passed only last object in table, but the object that was clicked should be displayed, how to solve this problem?

  <tr data-toggle="control-sidebar" *ngFor="let user of pagedItems">
      <td><control-sidebar [user]="user">
  </control-sidebar>{{ user.name }}</td>

and in another component view showing only last table row.

why are you passing `userDetails` instead of the `user` object ? — Abrar, Jun 29 '17 at 14:54
See this example. It shows how to pass a clicked object from `*ngFor` loop to another component. https://angular.io/generated/live-examples/toh-pt3/eplnkr.html — Nehal, Jun 29 '17 at 14:58

Abrar · Accepted Answer · 2017-06-29T15:23:43.660

0

When you are binding the user data to the control-sidebar:

[user]="userDtails", the problem lies here.

Modify the code :

<tr data-toggle="control-sidebar" *ngFor="let user of pagedItems">
      <td (click)="getUser(user)"><control-sidebar [user]="user">
  </control-sidebar>{{ user.name }}</td>

Make sure you have defined the getUser method in your component class.

Notice that I have set: [user]="user". SInce you want to pass the user object into control-sidebar.

Everything should work fine now.

EDIT :

Since you want to display the user that was clicked you can bind a method to the (click) handler and pass the user object. for example:

(click)="showUser(user)"

edited Jun 29 '17 at 15:23

answered Jun 29 '17 at 14:53

Abrar

6,874
9
28
41

ohh excuse me, i made a mistake when i wrote post. I corrected it.in my code was same binding and i got result described above – llotall Jun 29 '17 at 15:01
You want the `user` object once you click on the `td`, right ? – Abrar Jun 29 '17 at 15:03
may be it not work because i use table insted li like in your example? – llotall Jun 29 '17 at 15:07
Click handlers work for `td`. Edited answer. It should work fine. – Abrar Jun 29 '17 at 15:22
I was inattentive, and forgot about elvis operator in component, your exapmle helped for me!Thanks!! – llotall Jun 29 '17 at 15:23

Assign variable value from another component in *ngFor by click in angular 2

1 Answers1