Hi I am new to Angular 13 and 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>>Solution :
You are using your filter on user.id for both sides of the comparison operator.
You need to compare with your method’s parameter:
removeUser(id:string): void{
this.users = this.users.filter(user => user.id !== id)
}