title: How to pass object to a component in Angular 2?
body: <p>I have a read component and an edit component. The read component displays all of the properties of an object (Employee) and then when an edit button is clicked it reroutes to a separate page with another component. The goal would be to get the property values to display in text boxes where they could be edited</p>
  
  <p>In the read component the Edit button has this method which is called when clicked</p>
  
  <pre><code>toggleEditMode() {
      this.router.navigate('/editPage')
  }
  </code></pre>
  
  <p><a href="https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/" rel="nofollow noreferrer">Using this example</a> I understand how I would pass one string but I am looking to pass the entire object. <a href="https://angular.io/guide/component-interaction#!#bidirectional-service" rel="nofollow noreferrer">Also have read this</a> but I don't understand how I would modify it to work with the navigation change. I am not looking to pass this through query params</p>
  
  <p><strong>Edit</strong>: I have updated my code to use a shared service. However in the child (edit) component the Employee is undefined. I think maybe I am clearing out the data from the service which is why it's empty (?) but not sure where I am doing this</p>
  
  <p><strong>Parent</strong></p>
  
  <pre><code>@Component({
      providers: [EmployeesService]
  })
  export class EmployeeParentComponent {
      private employee: Employee;
  
      constructor(
          private employeesService: EmployeesService,
          protected router: Router,
          protected route: ActivatedRoute,) { }
  
      ngOnInit(): void {
  
      }
  
      toggleEditMode(employee: Employee) {
          this.employeesService.employee = employee;
          alert(this.employeesService.employee.firstName); //correct name
          this.router.navigate('/editPage')
      }
  }
  </code></pre>
  
  <p><strong>Child</strong></p>
  
  <pre><code>@Component({
      providers: []
  })
  
  export class EditEmployeeComponent {
      constructor(
          private employeesService: EmployeesService
          ) {
          console.info(employeesService.employee); //undefined
      }
  
      ngOnInit(): void {
          console.info(this.employeesService.employee); //undefined
      }
  }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>@Injectable()
  export class EmployeesService {
      public employee: Employee;
  }
  </code></pre>