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

@@ -3,9 +3,10 @@ import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} fr
 import {MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
-import {MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
 import {Employee} from "../Employee";
 import EmployeeApiService from "../services/employee-api.service";
+import {catchError} from "rxjs";
 
 @Component({
   selector: 'app-create-employee',
@@ -27,6 +28,7 @@ export class CreateEmployeeComponent implements OnInit{
   employeeForm!: FormGroup;
   employeeService: EmployeeApiService = inject(EmployeeApiService);
   formBuilder: FormBuilder = inject(FormBuilder);
+  dialogRef: MatDialogRef<CreateEmployeeComponent> = inject(MatDialogRef);
 
   ngOnInit(): void {
     this.employeeForm = this.formBuilder.group({
@@ -46,6 +48,6 @@ export class CreateEmployeeComponent implements OnInit{
     }
 
     this.employeeService.create(this.employeeForm.value as Employee).subscribe();
-    location.reload();
+    this.dialogRef.close();
   }
 }

src/app/employee/table/table.component.ts

@@ -76,6 +76,10 @@ export class TableComponent implements OnInit{
   }
 
   protected showCreateEmployeeModal() {
-    this.createEmployeeDialogue.open(CreateEmployeeComponent);
+    this.createEmployeeDialogue.open(CreateEmployeeComponent)
+      .afterClosed()
+      .subscribe(() => {
+      this.employees$ = this.fetchEmployees();
+    });
   }
 }