I have successfully implemented a mat dialog table with 3 columns - name, email, and delete icon. When the user clicks on the delete icon, it prompts a confirmation message to confirm the deletion. Upon confirming, the item is removed from the database. However, I am facing an issue where the changes are not reflecting immediately. I have to close the dialog box and reopen it to see the updated data. How can I ensure that the changes are updated instantly?
// The parent component contains a master table. On clicking the name, a mat table with nested user list opens up for deletion
delete(name){
//Backend logic
if(response.status === 400){
//Show error message
} else {
//Open dialog table
this.openDialog(userData);
}} })}
openDialog(user, c){
// Some logic
const dialogRef = this.dialog.open(DialogExample, {
width: '700px',
height: '500px',
data: {arrayDialog: this.allUsers, c}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.allUsers = [];
});}}
// Child component to open mat dialog table
@Component({
selector: 'dialog--example',
templateUrl: 'dialog.html',
})
export class DialogExample {
readonly userColumns: string[] = ['name', 'email', 'delete'];
delete(email, uName){
//Some logic
confirmationDialog(e,c) {
const dialogRef = this.dialog.open(ConfirmationDialog,{
data:{
message: 'Please confirm the deletion',
buttonText: {
ok: 'Delete',
cancel: 'Cancel'
}} });
dialogRef.afterClosed().subscribe((confirmed: boolean) => {
if (confirmed) {
//After closing the confirmation dialog, here I want to update the mat dialog table to show updated data excluding the deleted user details.
} });}}
@Component({
selector: 'deleteconfirm',
templateUrl: 'deleteconfirm.html',
})
export class ConfirmationDialog {
returns true if confirmed
returns false if cancelled
How can I trigger the update? If I try to call the delete(name) function directly, I receive an error stating that it cannot be found. Can someone guide me on how to proceed? Thank you.