How to add list automatically after insert without page refresh in angular 5

Question

I have main component employees under this there are two components. a) employee b)employee-list the left side part is employee and right side part is employee-list

how can i update employee-list details array after insert in left side without page load in angular 5. Please click on the link in description to see the image for better understand my problem.

Answer 1

 child component 1 // employee component
 @Output()
 employeeListDetails = new EventEmitter(); // emit your submitted details array  


 Main component: // parent component

 @Input()
 employeeListDetails: any; // this is the array of your submitted data in employee component

 Parent HTML:
 <app-employee (employeeListDetails)="employeeListDetails= $event"> </app-employee>
 <app-employee-list [employeeData] = "employeeListDetails"> </app-employee-list>



 child component 2 // employee list component 
 @Input()
 employeeData: any;

ngOnChanges(simpleChanges: SimpleChanges) { // you have to import OnChange and SimpleChanges
if (employeeData !== undefined){

 // assign employee data to the variable you are iterating
}

}