My attempts to delete an employee with a confirmation dialog are not successful. I have already implemented a splice method in my service code. The delete function was functioning correctly before adding the confirmation feature, but now that I have upgraded my code with confirmation, the delete operation is not working. I suspect there might be an issue in the delete method of my service. Can someone assist me in troubleshooting and fixing my code?
EmployeeDetailsComponent: This component links to or displays the confirm dialog component.
<div class="main-content" *ngIf="selectedEmployee">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-info">
<h4 class="card-title "><b>Employee {{selectedEmployee.id}} Details</b></h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered border-primary">
<thead class=" text-primary">
<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 class="text-right">
<button type="button" (click)="updateEmployee(selectedEmployee.id)"
class="btn btn-default"><b>Update</b></button>
<div class="space">
</div>
<button type="button" (click)="openDialog()"
class="btn btn-danger"><b>Delete</b></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>ConfirmComponent: Displays the confirm dialog.
<div>
<div class="header">
<h2 mat-dialog-header>Title</h2>
<button mat-icon-button>
<mat-icon>close</mat-icon>
</button>
</div>
<div mat-dialog-content>
Are you sure you want 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);
}
}