I've managed to successfully implement the ng-bootstrap table full example.
Deleting objects from the DOM and database works fine, but I'm struggling to figure out how to delete a row from the view without having to reload the page. It's important to note that the delete function needs to be triggered from the ng-bootstrap modal dialog confirm button.
I can't access data$ from the for loop like in the example below or similar approaches, because todo (or whatever name) is an observable todos$.
<!-- html -->
<tr *ngFor="let todo of tableService.todos$ | async;">
// typescript
deleteRow(id){
for(let i = 0; i < this.data.length; ++i){
if (this.data[i].id === id) {
this.data.splice(i,1);
}
}
}
Can someone please guide me in the right direction?
I have this piece of code:
deleteTodo(id: string) {
this.todoService.deleteTodo(id)
.subscribe(data => {
console.log(data); // print message from server
},
error => console.log(error)
);
this.tableService.todoArray = this.tableService.todoArray.filter(elem => elem._id !== id);
this.todoLength--;
this.modalService.dismissAll();
console.log('filtered array: ' + this.tableService.todoArray.length);
console.log('id: ' + id);
}
This function removes a todo item from the database, and the filter method removes the todo from an array. Please refer to the screenshot below.
https://i.sstatic.net/GPGYR.png
Link to my app's source code repository:
https://github.com/SrdjanMilic/NG-Bootstrap-Todo-list