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 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 Shows 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 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);
}
}>Solution :
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);
}