I'm currently working with a Mat-table that has expandable rows, each containing an update functionality for the data. While the POST and GET requests are functioning properly, I encounter an issue where I need to reload the page in order to see the updated data after performing an update operation. Even after using the renderRows() method of the mat-table following the UPDATE query execution, the refresh doesn't seem to work as expected. Below is a snippet of my code:
abc.service.ts
createExamCategory(options) {
return this.http.post<{ message: string }>(this.url + '/createExamCategory', options);
}
getExamCategory():Observable<any> {
return this.http.get<any>(this.url + '/getAllExamCategory');
}
abc.component.html
<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay; index as i">
<th mat-header-cell *matHeaderCellDef>
{{column=='id'?'Id':column=='examCategoryName'?'Category':column=='isActive'?'Status':''}}
</th>
<td mat-cell *matCellDef="let element">
<label [class.table-data]="column=='isActive'">{{element[column]}}</label>
<label *ngIf="column=='isActive' && element[column]">Active</label>
<label *ngIf="column=='isActive' && !element[column]">Inactive</label>
<button mat-icon-button color="primary" *ngIf="column=='Action'" (click)="expandedElement = expandedElement === element ? null : element">
<mat-icon fontSet="material-icons-outlined" (click)="onClick(element)">edit</mat-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-description">
<form [formGroup]="updateExamCategory" (ngSubmit)="updateExamCategoryForm()">
<mat-form-field class="example-full-width create-fields">
<mat-label>Category</mat-label>
<input matInput formControlName="examCategoryName">
</mat-form-field>
<mat-slide-toggle formControlName="isActive">{{Status.value==true?'Active':'Inactive'}}</mat-slide-toggle>
<button type="submit" mat-flat-button color="primary" style="display: inline;margin-left: 50px;">Update</button>
</form>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
abc.component.ts
onClick(e) {
this.updateExamCategory.controls['id'].setValue(e.id);
this.updateExamCategory.controls['examCategoryName'].setValue(e.examCategoryName);
this.updateExamCategory.controls['isActive'].setValue(e.isActive);
this.change[0] = this.updateExamCategory.get('examCategoryName').value;
this.change[1] = this.updateExamCategory.get('isActive').value;
}
get Status() {
return this.updateExamCategory.get('isActive');
}
get examCatergory() {
return this.updateExamCategory.get('examCategoryName');
}
updateExamCategoryForm() {
if(this.change[0] == this.examCatergory.value && this.change[1] == this.Status.value) {
return alert('Same Value cannot be updated');
}
this.adminCategory.createExamCategory(this.updateExamCategory.value).subscribe(reponse => {
return console.log(reponse.message);
});
}
getTableData() {
this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];
this.adminCategory.getExamCategory().subscribe((reponse: any) => {
this.ExamCategoryData = reponse.examCategoryList;
this.dataSource = new MatTableDataSource(this.ExamCategoryData);
this.dataSource.paginator = this.paginator;
}, error => {
console.log(error);
});
}
ngOnInit() {
this.getTableData();
}
This is the current state of my code. Any suggestions on what needs to be added or changed to resolve this issue?