To ensure that the employee details are fetched every time the URL state is routed to /employee, you can add a router event in the employee component.

In the employee.ts component:

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

ngOnInit() {    
  this.router.events.subscribe(
    (event: Event) => {
           if (event instanceof NavigationEnd) {
                this.employeService.getEmployees().subscribe(res => this.employeeObj = res);
           }
    });
}

Typically, the angular router will reuse the same component instance as much as possible during routing.

For instance, when moving from /component/1 to /component/2, if both URLs are mapped to the same component but with different parameters, the router will create an instance of the component when navigating to /component/1 and then reuse that same instance for /component/2. This behavior seems to align with what you're experiencing since it appears that ngOnInit is only called once. To confirm this, we would need to see your templates and route configuration. If you'd like, feel free to share that information here for further analysis.

If not, another approach could be to subscribe to the router events stream instead of solely relying on ngOnInit.

Within your employee.component.ts file:

.....
export class EmployeesComponent implements OnInit {

.....

ngOnInit() {
   this.router.events
              .filter(e => e instanceof NavigationEnd)
              .switchMap(e => this.employeeService.getEmployees())
              .subscribe(res => this.employeeObj = res);    
}

EDIT

One questionable line of code I noticed:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EmployeeService } from '../../employee.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.css'],

})
export class FormComponent implements OnInit {
  empform;

  ngOnInit() { 
    this.empform = new FormGroup({
      empname: new FormControl(""),
      joindate: new FormControl(""),
      salary: new FormControl("")
    })
  } 

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

 onSubmit(user){   
    this.employeeService.addEmployee(user)
    .subscribe(
        (response) => { this.router.navigate(['/employees']); }  
    );

  }
}

In summary, you mentioned that upon navigating from the employee component to the form component and back, the employee list doesn't refresh when returning to the employee component. To troubleshoot this, consider using console.log statements to verify if ngOnInit is indeed triggered multiple times during this flow. As per your router setup, the employee component should be reinitialized upon transitioning between the lists and form.

For components that are connected to a route, it is recommended to include your code in the constructor by subscribing to ActivatedRoute params and triggering change detection like this:

constructor(private route: ActivatedRoute, private changeDetector: ChangeDetectorRef) {
    super();
    this.route.params.subscribe((data) => {
    */update model here/*
    this.changeDetector.detectChanges();
   } 
}

It seems like the issue with your route call is because it is outside of the Angular lifecycle due to an asynchronous call.

You should first check if your console displays a warning message like:

WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'

If this warning appears, the solution is straightforward. You need to instruct Angular to execute your routing directive within its lifecycle.

The following code snippet can resolve your problem:

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';

...
constructor(
    private employeeService: EmployeeService, 
    private router:Router,
    private ngZone: NgZone) { }

 onSubmit = function(user) {
   this.employeeService.addEmployee(user)
     .subscribe(
       (response) => { 
         this.ngZone.run(() =>
           this.router.navigate(['/employees']));
       }  
     );
}

To implement the desired functionality, insert the given code snippet inside the EmployeesComponent:

ionViewWillEnter(){
  this.ngOnInit();
}

This will ensure that ngOnInit is triggered manually after redirection.

When you lower the version of @angular/[email protected], it appears to function properly with routerLink, triggering ngOnInit when navigating.

Ensure that in app.component.html, you include

<router-outlet></router-outlet>

. This configuration is compatible with the most recent release of Angular version 5.

1. First, import the component that you want to navigate to

eg.

import { SampleComponent} from './Sample.component';

2. Next, add the imported component to the constructor for navigation

constructor( private Comp: SampleComponent){}

3. Use this code snippet where you want the navigation to occur

this.Comp.ngOnInit();
this._router.navigate(['/SampleComponent']);--/SampleComponent-your router path

eg. For example, after inserting an employee record, redirect to the employee list page

 this.service.postData(Obj)
          .subscribe(data => {
            (alert("Inserted Successfully"));
            this.Comp.ngOnInit();
            this._router.navigate(['/SampleComponent']);
          },
            error => {
              alert(error);
          });