add delete functionality

src/app/delete-employee/delete-employee.component.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>Delete {{employee.firstName}} {{employee.lastName}}</h2>
+<mat-dialog-content>Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone.</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="true" (click)="deleteEmployee(employee.id ?? 0)">Delete</button>
+</mat-dialog-actions>

src/app/delete-employee/delete-employee.component.ts

@@ -0,0 +1,38 @@
+import {Component, EventEmitter, Inject, inject, Output} from '@angular/core';
+import {Employee} from "../Employee";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatButton} from "@angular/material/button";
+import ApiService from "../services/api.service";
+
+@Component({
+  selector: 'app-delete-employee',
+  imports: [
+    MatDialogContent,
+    MatDialogTitle,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose
+  ],
+  templateUrl: './delete-employee.component.html',
+  standalone: true,
+  styleUrl: './delete-employee.component.css'
+})
+export class DeleteEmployeeComponent {
+  private apiService: ApiService = inject(ApiService);
+
+  @Output()
+  private deleteEvent: EventEmitter<null> = new EventEmitter();
+
+  constructor(@Inject(MAT_DIALOG_DATA) protected employee: Employee) {
+  }
+
+  deleteEmployee(id: number) {
+    this.apiService.deleteById(id).subscribe();
+  }
+}

src/app/employee-list/employee-list.component.html

@@ -37,7 +37,7 @@
                   <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2">
                     <mat-icon>edit</mat-icon>
                   </button>
-                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'">
+                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
                     <mat-icon>delete</mat-icon>
                   </button>
                 </td>

src/app/employee-list/employee-list.component.ts

@@ -1,19 +1,21 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { Observable, catchError, of, retry } from 'rxjs';
+import {catchError, Observable, of, retry} from 'rxjs';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import {HttpClient, HttpErrorResponse} from '@angular/common/http';
-import { Employee } from '../Employee';
+import {Employee} from '../Employee';
 
-import { MatCardModule } from '@angular/material/card';
+import {MatCardModule} from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
+import {MatButtonModule} from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import {MatIconModule} from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
-import { MatDividerModule } from '@angular/material/divider';
+import {MatDividerModule} from '@angular/material/divider';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
-import { MatMenuModule } from '@angular/material/menu';
+import {MatMenuModule} from '@angular/material/menu';
-import { MatTableModule } from '@angular/material/table';
+import {MatTableModule} from '@angular/material/table';
-import { MatSortModule } from '@angular/material/sort';
+import {MatSortModule} from '@angular/material/sort';
+import {MatDialog} from "@angular/material/dialog";
+import {DeleteEmployeeComponent} from "../delete-employee/delete-employee.component";
 
 @Component({
   selector: 'app-employee-list',
@@ -45,7 +47,8 @@ export class EmployeeListComponent {
 
   constructor(
     private readonly httpClient: HttpClient,
-    private readonly snackBar: MatSnackBar
+    private readonly snackBar: MatSnackBar,
+    private readonly deleteDialogue: MatDialog
   ) {
     this.employees$ = this.fetchEmployees();
   }
@@ -71,4 +74,8 @@ export class EmployeeListComponent {
       panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
     });
   }
+
+  protected openDeleteDialogue(employee: Employee): void {
+    this.deleteDialogue.open(DeleteEmployeeComponent, {data: employee});
+  }
 }

src/app/services/api.service.ts

@@ -0,0 +1,16 @@
+import {inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Employee} from "../Employee";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export default class ApiService {
+  private http: HttpClient = inject(HttpClient);
+
+  public deleteById(id: number): Observable<Employee> {
+    return this.http.delete(`http://localhost:8089/employees/${id}`)
+  }
+}