I am trying to create a list of items and delete them one by one. I have used (click) and removeUser() to delete the single item, unfortunately the output is that no matter what button is clicked, all the 3 items are deleted at the same time. Please help. Thank you

export class UserlistComponent {
     users = [
      {
        id : '1',
        name: 'Jack',
        age: '33'
      },
      {
        id : '2',
        name: 'Kim',
        age: '44'
      },
      {
        id : '3',
        name: 'Mag',
        age: '22'
      },

        ]
  
    removeUser(id:string): void{ 
          this.users = this.users.filter(user => user.id !== user.id)
    }
  
}

<li *ngFor="let user of users">

    {{user.name}} is {{user.age}} years old
    <button (click)="removeUser(user.id)">Remove</button>


</li>

I am trying to create a list of items and delete them one by one. I have used (click) and removeUser() to delete the single item, unfortunately the output is that no matter what button is clicked, all the 3 items are deleted at the same time. Please help. Thank you

export class UserlistComponent {
     users = [
      {
        id : '1',
        name: 'Jack',
        age: '33'
      },
      {
        id : '2',
        name: 'Kim',
        age: '44'
      },
      {
        id : '3',
        name: 'Mag',
        age: '22'
      },

        ]
  
    removeUser(id:string): void{ 
          this.users = this.users.filter(user => user.id !== user.id)
    }
  
}

<li *ngFor="let user of users">

    {{user.name}} is {{user.age}} years old
    <button (click)="removeUser(user.id)">Remove</button>


</li>

• javascript
• angular

2 Answers 2

You are using your filter on user.id for both sides of the parison operator.

You need to pare with your method's parameter:

removeUser(id:string): void{ 
    this.users = this.users.filter(user => user.id !== id)
}

Fix to your question

You are using the filter statement incorectly. You should use the parementer in removeUser function to filter down the list.

removeUser(id:string): void{ 
    this.users = this.users.filter(user => user.id !== id)
}

Better Approach

You could just splice the unwanted elements with Array.splice

Template

<li *ngFor="let user of users; let i = index">
    {{user.name}} is {{user.age}} years old
    <button (click)="removeUser(i)">Remove</button>
</li>

Component.ts

removeUser(index): void{ 
    this.users.splice(index, 1)
}