Show/hide various elements in ngFor Angular

Question

I have a table, which displays data in ngFor. When I delete an element, I want to hide it. I figured I have to do a variable in my record component hide:boolean which is false by default, but when I click od delete button, it changes to true. I don't know how to "catch" this variable in my table.

<table>
  <thead>
    <tr>
      <th>
        Id
      </th>
      <th> 
        Name
      </th>
      <th>
        Surname
      </th>
      <th>
        Actions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr sl-record *ngFor="let recordElement of records" [record]="recordElement" [hidden]="recordElement.hide"></tr>
  </tbody>
</table>

And my record component:

<td>{{record.id}}</td>
<td>{{record.name}}</td>
<td>{{record.surname}}</td>
<td>
  <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
    <button type="button" class="btn btn-danger" (click)="removeRecord(record.id)">
      <i class="fa fa-trash-o" aria-hidden="true"></i> Remove
    </button>
  </div>
</td>

What am I doing wrong? I have my data in json file, connected by json-server. I delete record with http.delete() function. It gets deleted from my file, but the table does not reload by itself.

record component, removeRecod function:

removeRecord(id) {
    var url = this.data_url + "/" + id;
    this.http.delete(url).subscribe();
    this.hide = true;
  }

Answer 1

Two basic options here:

1. pass in the entire record object to the delete function and switch "hide" to true

   removeRecord(record) {
      record.hide = true;
      let id = record.id;
      // do whatever to delete on server
   }
   

2. (better) remove the record from the list itself rather than trying to hide it.

   removeRecord(id) {
      //do whatever to delete the record on server
   
      let recordIndex = this.records.findIndex(r => r.id === id);
      this.records = this.records.splice(recordIndex, 1);
   }