How to update filtered array after deleting item in angular

November 16, 2022

I am trying to delete an item from filtered list but it is not getting updated.

I am able to delete item without filtering.

html

<div class="search-hero">
      <input
        class="form-control"
        type="text"
        name="search"
        [(ngModel)]="searchText"
        autocomplete="off"
        placeholder="&#61442;  Start searching for a hero by id or name or country"
      />
    </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Hero Name</th>
          <th>Country</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let hero of heroes | filter: searchText; let index = index">
          <td>{{ hero.id }}</td>
          <td>{{ hero.name }}</td>
          <td>{{ hero.country }}</td>
          <td (click)="onDelete(index)"><button>Delete</button></td>
        </tr>
      </tbody>
    </table>

Ts file:

searchText;
  heroes = [
    { id: 11, name: 'Mr. Nice', country: 'India' },
    { id: 12, name: 'Narco', country: 'USA' },
    { id: 13, name: 'Bombasto', country: 'UK' },
    { id: 14, name: 'Celeritas', country: 'Canada' },
    { id: 15, name: 'Magneta', country: 'Russia' },
    { id: 16, name: 'RubberMan', country: 'China' },
    { id: 17, name: 'Dynama', country: 'Germany' },
    { id: 18, name: 'Dr IQ', country: 'Hong Kong' },
    { id: 19, name: 'Magma', country: 'South Africa' },
    { id: 20, name: 'Tornado', country: 'Sri Lanka' },
  ];

  onDelete(index) {
    this.heroes.splice(index, 1);
    console.log('deleted');
  }

UI is not updating only when something is searched in the searchbar.

Here is the reproducible example link

Thanks!

>Solution :

The hero in the heros list is identified by a unique id, you can try to delete it by a unique id.

<div class="container text-center">
  <h1>{{ title }}</h1>
</div>
<div class="container">
  <div class="row">
    <div class="search-hero">
      <input
        class="form-control"
        type="text"
        name="search"
        [(ngModel)]="searchText"
        autocomplete="off"
        placeholder="&#61442;  Start searching for a hero by id or name or country"
      />
    </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Hero Name</th>
          <th>Country</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let hero of heroes | filter: searchText; let index = index">
          <td>{{ hero.id }}</td>
          <td>{{ hero.name }}</td>
          <td>{{ hero.country }}</td>
          <td (click)="onDelete(hero.id)"><button>Delete</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Angular Search Using ng2-search-filter';
  searchText;
  heroes = [
    { id: 11, name: 'Mr. Nice', country: 'India' },
    { id: 12, name: 'Narco', country: 'USA' },
    { id: 13, name: 'Bombasto', country: 'UK' },
    { id: 14, name: 'Celeritas', country: 'Canada' },
    { id: 15, name: 'Magneta', country: 'Russia' },
    { id: 16, name: 'RubberMan', country: 'China' },
    { id: 17, name: 'Dynama', country: 'Germany' },
    { id: 18, name: 'Dr IQ', country: 'Hong Kong' },
    { id: 19, name: 'Magma', country: 'South Africa' },
    { id: 20, name: 'Tornado', country: 'Sri Lanka' },
  ];

  onDelete(heroId: number) {
    console.log(heroId);
    this.heroes = this.heroes.filter((hero) => hero.id !== heroId);
    console.log('deleted');
  }
}

Example here