Dynamic addition and removal of components Angular

Question

I have a container that contains two independent components.

The list of users comes to the first component from the backend part.

When clicking on a specific user, I need to show all of his complete information in the general container of the second independent component.

I presented my code in Stackblitz

It doesn't work quite right when removing an added component. It is not the selected component that is deleted, but only the last one.

Can anyone help me where is the error?

Answer 1

userId is always undefined when calling this.appService.removeUser(userId);. This is because of an issue in your template, you were calling removeUser(options.userId) instead of removeUser(options.id) :

  <div class="one-user" id="{{ options.id }}">
    <div>User ID: {{ options.id }}</div>
    <div>Name: {{ options.name }}</div>
    <div>Age {{ options.age }}</div>
    <button (click)="removeUser(options.id)">remove</button> 
  </div>

Also, notice that viewContrainerRef.remove takes the index of an element, not an id. So you need to be carefull to pass the right index. (0 for the fist element, 1 for the 2nd etc).