Project showcasing my CRUD (Create, Read, Update, Delete) implementation on Angular's Mat-Table. Most importantly frontend updates accordingly with operations. This is important if you're using data from backend (some DB like MySQL) but I guess It can be used for local generated data as well.
Code in action:
Here's a sample from my real-life application (sorry for Croatian):
Angular app using PHP RESTful API does backend updates to MySQL DB. You can find entire HttpClient REST code from this project inside dataService.
You can play around with code demo here.
Material Table updates if you do a pagination or filter update. I still find this to be a little hacky but It does job done.
private refreshTable() {
// if there's a paginator active we're using it for refresh
if (this.dataSource._paginator.hasNextPage()) {
this.dataSource._paginator.nextPage();
this.dataSource._paginator.previousPage();
// in case we're on last page this if will tick
} else if (this.dataSource._paginator.hasPreviousPage()) {
this.dataSource._paginator.previousPage();
this.dataSource._paginator.nextPage();
// in all other cases including active filter we do it like this
} else {
this.dataSource.filter = '';
this.dataSource.filter = this.filter.nativeElement.value;
}
}
In case you have smaller dataset without need for a paginator you can update just using filter:
private refreshTable() {
// if there's nothing in filter
if (this.dataSource._filterChange.getValue() === '') {
this.dataSource.filter = ' ';
this.dataSource.filter = '';
} else {
// if there's something, we make a simple change and then put back old value
this.dataSource.filter = '';
this.dataSource.filter = this.filter.nativeElement.value;
}
}