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
In the read component the Edit button has this method which is called when clicked
toggleEditMode() {
this.router.navigate('/editPage')
}
Using this example I understand how I would pass one string but I am looking to pass the entire object. Also have read this 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
Edit: 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
Parent
@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')
}
}
Child
@Component({
providers: []
})
export class EditEmployeeComponent {
constructor(
private employeesService: EmployeesService
) {
console.info(employeesService.employee); //undefined
}
ngOnInit(): void {
console.info(this.employeesService.employee); //undefined
}
}
Service
@Injectable()
export class EmployeesService {
public employee: Employee;
}