Delete with confirm dialog-CodePudding

Im trying to delete an employee with a confirmation dialog but does not work.. I already have a method for splice in my service code. The delete function was previously working when i had no confirmation but now the i upgraded my code with confirmation the delete is not working. I think its on my delete method in my service, can anyone help me to fix my code..

EmployeeDetailsComponent This links or shows the confirm dialog component

<div  *ngIf="selectedEmployee">
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <h4 ><b>Employee {{selectedEmployee.id}} Details</b></h4>
                    </div>
                    <div >
                        <div >
                            <table >
                                <thead >
                                    <th scope="col">Employee ID</th>
                                    <th scope="col">Last Name</th>
                                    <th scope="col">First Name</th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            {{selectedEmployee.id}}
                                        </td>
                                        <td>
                                            {{selectedEmployee.lastName}}
                                        </td>
                                        <td>
                                            {{selectedEmployee.firstName}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>


                            <div >
                                <button type="button" (click)="updateEmployee(selectedEmployee.id)"
                                    ><b>Update</b></button>
                                    <div >
                                    </div>
                                <button type="button" (click)="openDialog()" 
                                    ><b>Delete</b></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ConfirmComponent Shows the confirm dialog

<div>
<div >
    <h2 mat-dialog-header>Title</h2>
    <button mat-icon-button>
        <mat-icon>close</mat-icon>
    </button>
</div>

<div mat-dialog-content>
    Are you sure to delete this?
</div>
<div mat-dialog-sections [align]="'end'">
    <button mat-raised-button [mat-dialog-close]="false">No</button>
    <button mat-raised-button color="primary" [mat-dialog-close]="true" (click)="navigateBack()" (click)="deleteEmployee(selectedEmployee.id)" >Yes</button>
</div>
</div>

DialogService

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmComponent } from './confirm/confirm.component';
import { EMPLOYEELIST } from './EmployeeData';
@Injectable({
  providedIn: 'root'
})
export class DialogService {

  constructor(private dialog: MatDialog) {

   }

   confirmDialog(){
    this.dialog.open(ConfirmComponent);
   }
 
   deleteEmployee(id: number) {
    const index = EMPLOYEELIST.findIndex((employee: any) => employee.id === id);
    if (index !== -1) EMPLOYEELIST.splice(index, 1);
  }

}

CodePudding user response：

The dialog is a different component, you cannot call delete function inside dialog.

You can do it like this in:

Employee Details Component:

confirmAndDeleteEmployee( id: number ): void {
  const dialogRef = this.dialog.open(ConfirmComponent);

  dialogRef.afterClosed().subscribe(result => {
    if ( !!result ) {
       this.deleteEmployee( id );
    }
  });
}

And in Dialog Component:

onConfirmDeleteEmployee(): {
  this.dialog.close(true);
}