CRUD for Angular Material Table
Project showcasing my CRUD (Create, Read, Update, Delete) implementation on Angular 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.
Project is updated and now runs on Angular version 13 including Angular Material 13.
- For Angular 6 clone angular_6 branch.
- For Angular 4 clone angular_4 branch.
Screenshots
Code in action:
REST API
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.
Demo
You can play around with code demo here.
Refresh function
Material Table updates if you do a pagination or filter update. You can trigger that with simple method as follows:
private refreshTable() {
this.paginator._changePageSize(this.paginator.pageSize);
}
Credits to yeager-j for providing the refresh function
Old method:
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;
}
}