Confirmation Modal

Question

Hi

I have below Layout Component code. In Dialog Component HTMl i have delete function. Where i need to define & how to delete the record

export class LayoutComponent implements OnInit {
  

  constructor(private _dialog:MatDialog, private dialog: MatDialog){}
  openAddEditForm(){
    this._dialog.open(EmpAddEditComponent)
  }
  ngOnInit(): void {
    this.getallEmployee();
  }

  

  openConfirmationDialog(): void {
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      width: '250px',
      data: { message: 'Are you sure you want to delete?' }
    });
  
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // Perform delete action here
      }
    });
  }
   
}

<div mat-dialog-title>
    <h4> {{title}} </h4> 
</div>

<mat-dialog-content>
    <h5> {{message}} </h5> 
</mat-dialog-content>

<mat-dialog-actions>
    <button mat-raised-button color="warning" >Cancel</button>
    <button mat-raised-button color="primary" (click)="Delete()" type="submit">Delete</button>
</mat-dialog-actions>

Jayraj Chhaya · Answer

You can achieve this by passing data or parameters to the dialog component when opening it from different list components. Here's a step-by-step approach: Pass Identifier/Context : When opening the dialog component from each list component, pass some identifier or context that identifies the source of the action. This identifier can be a string, an object, or any relevant information. Receive Data in Dialog Component : In the dialog component, receive the identifier or context passed from the list component. You can do this using Angular's MatDialogRef and MAT_DIALOG_DATA . Handle Identifier/Context : Use the received identifier or context to determine which list component the action originated from. Perform Action : Based on the identifier or context, perform the desired action, such as deleting a record from the appropriate list component. import { MatDialog } from '@angular/material/dialog'; import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component'; @Component({ selector: 'app-list-component-a', templateUrl: './list-component-a.component.html', styleUrls: ['./list-component-a.component.css'] }) export class ListComponentAComponent { constructor(public dialog: MatDialog) {} openDeleteDialog(): void { const dialogRef = this.dialog.open(DeleteDialogComponent, { data: { component: 'ListComponentA' } }); } } Dialog component import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Inject } from '@angular/core'; @Component({ selector: 'app-delete-dialog', templateUrl: './delete-dialog.component.html', styleUrls: ['./delete-dialog.component.css'] }) export class DeleteDialogComponent { constructor( public dialogRef: MatDialogRef , @Inject(MAT_DIALOG_DATA) public data: any ) {} onDelete(): void { // Use this.data.component to determine the source component if (this.data.component === 'ListComponentA') { // Delete logic for ListComponentA } else if (this.data.component === 'ListComponentB') { // Delete logic for ListComponentB } this.dialogRef.close(); } }

Ramco Ramco · Answer

Hi Jayraj If i want to use same Dialog Comonent with multiple List Compnents then how i will know from which component to delete record Thanks

Jayraj Chhaya · Answer

To define and handle the delete functionality in the Dialog Component, you need to create the Delete() function within the Dialog Component class. This function will contain the logic to delete the record when the user confirms the action. Here is an example of how you can define the Delete() function in the Dialog Component: import { MatDialogRef } from '@angular/material/dialog'; export class DialogComponent { constructor(public dialogRef: MatDialogRef ) {} Delete(): void { // Add your delete logic here // This function will be called when the user clicks the Delete button in the dialog // Perform the delete operation based on your application's requirements // You can access the necessary data or services to delete the record // For example, you can call an API to delete the record from the backend // Once the delete operation is successful, you can close the dialog if needed this.dialogRef.close(true); // Close the dialog after successful deletion } } By defining the Delete() function in the Dialog Component and implementing the necessary delete logic inside it, you can handle the deletion of records effectively when the user interacts with the dialog.