Usuwanie danych z tabeli

Cześć. Stworzyłem tabelkę z danymi oraz button który je usuwa. Jak mogę zrobić aby po każdym usunięciu tabelka się odswierzyła i znikł wiersz z usuniętymi danymi ? :)

// on click
removeProduct(id: string) {
    const indexToRemove = this.products.findIndex(p => p.id === id);
    this.products.splice(indexToRemove, 1);
  }

Tak wygląda company-list.ts

  data: Company[];
  constructor(private service: CompanyService) { }

  ngOnInit() {
    this.service.getCompaniesList().subscribe(result => {
      this.data = result;
      console.log(this.data);
    });
  }

  changeStatus(name) {
    this.service.changeStatus(name).subscribe(result => { console.log(result); });
  }
  deleteCompany(id) {
    this.service.deleteCompany(id).subscribe();
    const indexToRemove = this.data.findIndex(p => p.id === id);
    this.data.splice(indexToRemove, 1);
  }

a tutaj jest html :

<header class="text-center mb-5">
    <h1>Pracodawcy</h1>
</header>
<table class="table table-dark table-hover text-center">
        <thead>
                <tr>
                  <th scope="col">Nazwa</th>
                  <th scope="col">Adres</th>
                  <th scope="col">NIP</th>
                  <th scope="col">Ilość ofert</th>
                  <th scope="col">Status</th>
                  <th scope="col">Ustawienia</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of data">
                  <td>
                      {{item.name}}  
                  </td>
                  <td>
                      {{item.address}}  
                  </td>
                  <td>
                      {{item.nip}}  
                  </td>
                  <td>
                    {{item.tenureCount}}
                  </td>
                  <td>
                      <label><input (click)="changeStatus(item.name)" type="checkbox" class="ios-switch bigswitch" [checked]="item.isActive" /><div><div></div></div></label>
                  </td>
                  <td>
                      <button (click)="deleteCompany(item.id)" class="button button-delete mr-2"><i class="far fa-trash-alt"></i></button>
                  </td>
                </tr>
                </tbody>
              </table>

Na początek wrzuciłbym kod usuwający wewnątrz subscribe.
Ok, mój błąd wygląda na to, że https://stackoverflow.com/questions/47693951/why-is-not-updated-model-in-ngfor-after-changed-model
Spróbuj

deleteCompany(id) {
    this.service.deleteCompany(id).subscribe(() => {
    this.data = this.data.filter(d => d.id !== id);
  });