In my application, I have a parent component called 'EmployeeComponent' that is responsible for displaying a list of employees. Additionally, there is a child component named 'EmployeeDetailComponent' which displays the details of the selected employee such as their name and email.
To pass the selected employee from the parent to the child component, I am using an @Input decorator like so:
@Input() employee: Employee; // This line should be included in the child component
The child component allows users to edit the employee information. Upon editing, the updated employee object is then passed back to the parent component using an event emitter defined as follows:
In the child component:
@Output() onSaved = new EventEmitter<Employee>();
onSubmit(){
this.onSaved.emit(this.employee);
}
And in the parent component:
onSaved(employee: Employee){
// The following line does not affect the employee's details in the view
this.selectedEmployee = Object.assign({}, employee);
// However, the old values are successfully replaced by the new ones
console.log(this.selectedEmployee);
// Additionally, this line successfully changes the employee's details in the view
this.employee.name = employee.name;
}
My question pertains to the differing outcomes of these two methods. Both approaches seemingly change the employee's details, yet only the second method seems to reflect these changes in the view. Why is that?