How to remove an element based on some property using typescript in angular

Question

I want to remove an element from an array based on its any property that can be its key, name or email or something else it can be.

Html

<tr *ngFor="let person of persons;" (click)="remove(person.key)">
  <td>{{person.key}}</td>
  <td>{{person.name}}</td>
  <td>{{person.email}}</td>
</tr>

typescript

persons = [
{ key: 1, name: 'Mr.sohail', email: '[email protected]' },
{ key: 2, name: 'Mr.Farhan', email: '[email protected]' },
{ key: 3, name: 'Mr.Fida', email: '[email protected]' },
{ key: 4, name: 'Mr.Liaqat', email: '[email protected]' },
{ key: 5, name: 'Mr.Abdullah', email: '[email protected]' },
{ key: 6, name: 'Mr.Ubaid', email: '[email protected]' },
{ key: 7, name: 'Mr.Wasif', email: '[email protected]' }
]

remove method to remove an element based on key property but it removes based on index.

remove(key) {
console.log(key);
this.data.persons.splice(key, 1);
}

Please let me know the required changes to apply

Thanks

I want to remove it on property bases, not on an index bases — WasiF
– WasiF, Commented Jan 26, 2018 at 6:24
As I can clearly see key is unique property of element. Still I'm wondering, what wrong you see with this answer.. — Pankaj Parkar
– Pankaj Parkar, Commented Jan 26, 2018 at 6:25
title of my question is already showing that I need to remove it on some property base, not an index base — WasiF
– WasiF, Commented Jan 26, 2018 at 6:29

cyberpirate92 · Accepted Answer · 2018-01-26 06:36:50Z

1

 removeByPropertyName(propertyName: string, value: any): void {
    let indexToRemove = persons.findIndex(p => p[propertyName] === value);
    if (indexToRemove !== -1)
        this.remove(indexToRemove);
    else
        console.log('Not found!');
 }

To remove by key, you can use the method as

removeByPropertyName('key', 10);

To remove by name,

removeByPropertyName('name', 'somename');

edited Jan 26, 2018 at 6:36

answered Jan 26, 2018 at 6:26

cyberpirate92

3,1865 gold badges30 silver badges48 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2018-01-26 06:37:54Z

1

As you want to delete element from an collection based on dynamic key(assuming it should be unique). You could consider passing two parameter for your remove function, object and propName

<tr *ngFor="let person of persons;" (click)="remove(person,'key')">
  <td>{{person.key}}</td>
  <td>{{person.name}}</td>
  <td>{{person.email}}</td>
</tr>

remove(person, propName){
   this.persons = this.persons.filter(p => p[propName] !== person[propName])
}

Demo Here

edited Jan 26, 2018 at 6:37

answered Jan 26, 2018 at 6:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2018-01-26 06:24:41Z

0

Use the filter function. Also, i think it should be this.persons not this.data.persons

remove(key) {
  console.log(key);
  this.persons= this.persons.filter(obj => obj.key !== key);

}

answered Jan 26, 2018 at 6:24

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Sajeetharan · Accepted Answer · 2018-01-26 06:25:22Z

0

What about using filter?

remove(key) {
console.log(key);
this.persons = this.persons.filter(t=>t.key != key);
}

answered Jan 26, 2018 at 6:25

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Michael Kang · Accepted Answer · 2018-01-26 06:33:49Z

0

Based on your use case, if you trying to remove an item when it is clicked, you can (and should) use the index. I see no reason to use a property.

Here is how I would remove an item base on an index:

<tr *ngFor="let person of persons; index as i" (click)="remove(i)">
  <td>{{person.key}}</td>
  <td>{{person.name}}</td>
  <td>{{person.email}}</td>
</tr>

remove(index) {
    this.data.persons.splice(index, 1);
}

answered Jan 26, 2018 at 6:33

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Collectives™ on Stack Overflow

How to remove an element based on some property using typescript in angular

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related