Delete row from DIV table when button clicked - html

Question

I have the following divTable:
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">TagName</div>
<div class="divTableCell">Higher/Lower</div>
<div class="divTableCell">Threshold</div>
<div class="divTableCell">Delete Alert?</div>
</div>
<div class="divTableRow" *ngFor="let com of currentAlerts">
<div class="divTableCell">{{com.tagname}}</div>
<div class="divTableCell">{{com.symbol == 1 ? 'Higher than' : 'Lower than'}}</div>
<div class="divTableCell">{{com.threshold}}</div>
<div class="divTableCell">
<button mat-stroked-button color="primary" (click)="submit(com.ID)">
Delete
</button>
</div>
</div>
</div>
As you can see this table loops through the array currentAlerts and creates a row for each item found.
The array is popuplated within ngOnInit() by connecting to a web API.
this.alerts.getCurrentAlerts(this.loginEmail)
.subscribe
((data: CurrentAlerts[]) => {this.currentAlerts = data;
console.log(this.currentAlerts.length)
if(!this.currentAlerts || !this.currentAlerts.length){
this.alertsTitleMessage = "You have no alerts configured."
}else{
this.alertsTitleMessage = "Here are the Alerts you have set up "
}}
);
When the Delete button is clicked the a delete request is sent to the database.
submit(ID){
let isDeleted = null;
this.alerts.deleteCurrentAlert(ID).subscribe(result => isDeleted = result);
this.manageCurrentAlerts();
}
All the above works as expected and the data is deleted from the database.
Question
How do I get the table to remove the deleted row? I have read answers that state to delete the row from the arra using splice but I couldnt get that working.

Answer 1

Add index in ngFor, *ngFor="let com of currentAlerts;let i = index"
In delete button, pass index i.e i instead of com.ID
Use splice in TS function, this.currentAlerts.splice(index,1)
Try like this:
<div class="divTableRow" *ngFor="let com of currentAlerts;let i = index">
...
<div class="divTableCell">
<button mat-stroked-button color="primary" (click)="submit(i)">Delete</button>
</div>
</div>
TS
submit(index){
this.currentAlerts.splice(index,1)
...
}

Answer 2

After deletion from database delete it from array.
submit(ID){
let isDeleted = null;
this.alerts.deleteCurrentAlert(ID).subscribe(result => isDeleted = result);
this.manageCurrentAlerts();
for(var i = 0; i< this.currentAlerts.length ; i++) {
if(this.currentAlerts[i].ID === ID) {
this.currentAlerts.splice(i, 1);
}
}
}

Answer 3

In your response from the server you need to delete the item from the array so in your method:
this.alerts.deleteCurrentAlert(ID).subscribe(result => isDeleted = result);
you should apply the filter method. Splice could work too but Filter has better performance.
Your method should look like this :
this.alerts.deleteCurrentAlert(ID).subscribe(result => {
this.currentAlerts = this.currentAlerts.filter(item => item.ID != ID);
isDeleted = result;
});