0

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;
}
cooper
  • 417
  • 1
  • 10
  • 20
  • 1
    Since there is routing involved, shared service would be the way to go: https://angular.io/guide/component-interaction#component-interaction – AT82 Aug 28 '17 at 19:13
  • why not look at shred services or ngrx for this use case check this [link](https://rahulrsingh09.github.io/AngularConcepts/faq) – Rahul Singh Aug 28 '17 at 19:13
  • 1
    As usual with Angular, Günter has a good answer for this: https://stackoverflow.com/a/35479148/4167438 – Jack Koppa Aug 28 '17 at 19:13

0 Answers0