New Entry Not reflacting in table after inserting New record in CRUD angular app

Question

In Angular 13, I created basic CRUD app of employee. When i insert new data and hit submit it run the createEmployee() service and print data on console. Then it redirect to home page that shows all entry in table which call getEmployeeList(). But sometimes it shows newly created entry and sometimes it not shows. In database it perfectly entered. When i goto some other page and come back to home page it shows.

create-employee.components.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from 'src/app/employee';
import { EmployeeService } from 'src/app/Services/employee.service';

@Component({
 selector: 'app-create-employee',
 templateUrl: './create-employee.component.html',
 styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {

 employee: Employee = new Employee();

 constructor(private employservice: EmployeeService,private router: Router) { }

 ngOnInit(): void {

 }

 saveEmployee() {
   this.employservice.createEmployee(this.employee).subscribe(data => {
     console.log(data);
   })
   console.error();
 }

 gotoemployeelist() {
   this.router.navigate(['employees']);
 }

 onSubmit() {
   this.saveEmployee();
   this.gotoemployeelist();
 }

}

employee-service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import { Employee } from '../employee';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  public baseURL="http://localhost:8080/api/v1/employees";

  constructor(private httpClient: HttpClient) {}

  getEmployeeList(): Observable<Employee[]> {
    return this.httpClient.get<Employee[]>(this.baseURL).pipe(
      map(employees => {
        for(let employee of employees) {
          employee.bdate = new Date(employee.bdate);
          employee.jdate = new Date(employee.jdate);
        }
        console.log("Employees Service: GetEmployee() called");
        return employees;
      }));
  }

  createEmployee(employee: Employee): Observable<Object> {
    console.log("Employees Service: CreateEmployee() called");
    return this.httpClient.post(this.baseURL,employee);
  }

  getEmployeebyId(id: Number): Observable<Employee> {
    console.log("Employees Service: GetEmployeeById() called");
    return this.httpClient.get<Employee>(this.baseURL+"/"+id);
  }

  updateEmployee(employee: Employee,id: number): Observable<Object> {
    console.log("Employees Service: UpdateEmployee() called");
    console.log(employee);
    return this.httpClient.put(this.baseURL+"/"+id,employee);
  }

  deleteEmployee(id: number): Observable<Object> {
    console.log("Employees Service: DeleteEmployee() called");
    return this.httpClient.delete(this.baseURL+"/"+id);
  }

}

Home-component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from 'src/app/employee';
import { EmployeeService } from 'src/app/Services/employee.service';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css',]
})
export class EmployeeListComponent implements OnInit {
  
  employees: Employee[];

  constructor(private employeeservice: EmployeeService,private router: Router) { 
    
    
  }

  ngOnInit(): void {
    this.getEmployees();
  }

  private getEmployees() {
    this.employeeservice.getEmployeeList().subscribe(data => {
      console.log(data);
      this.employees=data;
    });
  }

  updateEmployee(id: Number) {
    this.router.navigate(['update-employee',id]);
  }

  deleteEmployee(id: number) {
    this.employeeservice.deleteEmployee(id).subscribe(data => {
      console.log(id+"employeed Deleted.");
      this.getEmployees();
    });
  }

  employeeDetails(id: number) {
    this.router.navigate(['emloyee-details',id]);
  }

}

In console you can see that createEmployee() called then GetEmployee() called and then it print console.log(newEntry) after navigation.

Answer 1

What is happening program is not waiting to complete createEmployee API before navigating to the home page. You need to call gotoemployeelist() only after the you get response from createEmployee API. You can do this by calling the method inside the subscribe

 saveEmployee() {
   this.employservice.createEmployee(this.employee).subscribe(data => {
     console.log(data);
     this.gotoemployeelist();
   })
   console.error();
 }

 gotoemployeelist() {
   this.router.navigate(['employees']);
 }

 onSubmit() {
   this.saveEmployee();
 }