Обновление формы при нажатии кнопки обновления из другого представления (с использованием маршрутизации) в angular 7

У меня есть регистрация для отправки HTML, а затем я перехожу к другому представлению, используя маршрутизацию.

EmployeeRegister.html

<h4 >Employee Register</h4>
<form #form = "ngForm" autocomplete = "off" (submit) = "onSubmit(form)">
 <input type = "hidden" name = "id" #id = "ngModel" 
[(ngModel)] = "service.formData.id">
<div class = "bx--form-item form-group">
<input id = "text-input-3" name = "fullName" #fullName = "ngModel" [(ngModel)] = "service.formData.fullName" type = "text" class = "bx--text-input " placeholder = "Full Name*" required>
<div *ngIf  = "fullName.touched && fullName.invalid" class = "validation-error">This field is required</div>
</div>
 <div class = "bx--form-item form-group">
  <input id = "text-input-3" name = "designation" #designation = "ngModel" 
 [(ngModel)] = "service.formData.designation" type = "text" class = "bx--text-input" 
         placeholder = "Designation">
  <label for = "text-input-3" class = "bx--label"></label>
</div>
<div class = "bx--form-item form-group">
    <input id = "text-input-3" name = "empCode" #empCode = "ngModel" [(ngModel)] = "service.formData.empCode" type = "text" class = "bx--text-input" placeholder = "EmpCode">
  </div>
  <div class = "bx--form-item form-group">
      <input id = "text-input-3" name = "mobile" #mobile = "ngModel" [(ngModel)] = "service.formData.mobile" type = "text" class = "bx--text-input" placeholder = "Mobile Number">
      <label for = "text-input-3" class = "bx--label"></label>
    </div>
  <div class = "bx--form-item form-group">
<button class = "bx--btn bx--btn--primary" [disabled] = "form.invalid" 
 type = "submit">Submit</button>
    </div>
</form>

onclick или отправить, он переходит к другому представлению, отображающему список сотрудников

Вот EmployeeRegister.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from 'src/app/shared/employee.service';
import { NgForm,FormGroup,FormControl,Validators,FormBuilder } from 
'@angular/forms';
import { AngularFirestore } from '@angular/fire/firestore';
import { ToastrService } from 'ngx-toastr';
import { Router } from '@angular/router';

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

   Name=  new FormControl('');
   Designation = new FormControl('');
   EmployeeCode = new FormControl('');
   Mobile = new FormControl('');

    constructor(private service:EmployeeService,
    private firestore: AngularFirestore,
    private toastr:ToastrService,
    private router: Router) { }

    ngOnInit() {
    this.resetForm();
      }

    /*function to reset form after creating and updating form*/
     resetForm(form?: NgForm) {
       if (form != null)
       form.resetForm();
      this.service.formData = {
        id: null,
        fullName: '',
         designation: '',
         empCode: '',
          mobile: '',
            }
           }
           /* submit the data to be added into database having 'employees' 
           as the data 
            collection array*/
            onSubmit(form: NgForm){
             this.router.navigateByUrl('/EmployeeList');
              let data = Object.assign({},form.value);
              delete data.id;
                 if (form.value.id == null)
                  this.firestore.collection('employees').add(data);
else
this.firestore.doc('employees/'+form.value.id).update(data);
this.resetForm(form);
this.toastr.success('Submitted successfully','Employee Register');
       }

         }

EmployeeList.Html - имеет кнопку редактирования или обновления.

 <td><a class = "btn" (click) = "onEdit(emp)" ><svg width = "16" height = "16" viewBox = "0 0 16 16"><path d = "M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path></svg></a></td>

Из этого представления я хочу вернуться к представлению EmployeeRegister с данными в таблице, отображаемыми в соответствующем поле.

У меня есть кнопка редактирования в представлении EmployeeList, вызывающая функцию в машинописном тексте, как показано ниже.

EmployeeList.component.ts

onEdit(emp:Employee){
this.service.formData=Object.assign({},emp);
this.router.navigateByUrl('/RegisterEmployee');
 }

С помощью этого кода он переходит к представлению, но без обновления каких-либо данных в представлении EmployeeRegister. Как я могу это реализовать?