1

I have a parent component with three child components:

  1. Navigation - Navigate Between Pages.
  2. Pages - Loads pages using Route outlet(Employee, Department).
  3. Save Components - Saving that form once validated.

The code looks like:

<app-nav></app-nav>
<router-outlet></router-outlet>
<app-save></app-save>

So I want some way of communication between Pages (which loads dynamically when the route is called. It contains different types of forms) and Save. So once user click "save" from save component it should go to loaded component(employee, department) function, checks whether form is valid or not if yes then save the form.

I looked at many examples online:

  1. Communicate between sibling components Anguar 2 (This won't work as my sibling is loading dynamically).
  2. https://angular.io/guide/component-interaction

Also, I thought of creating a service but not sure how to get the function from the loaded components.

Any suggestion?

M0nst3R
  • 5,186
  • 1
  • 23
  • 36
displayname
  • 317
  • 1
  • 5
  • 15
  • Use a shared service, it's a service that is injected in both siblings and allows to share data. I would suggest to keep a boolean that 'save' component would set to true each time the form is valid and the other component would check to do what it needs – Vega Oct 16 '17 at 17:51
  • The problem is my form will get validate in Page components. But It can only get validated unless I call it from save component by clicking on save button. So here is the complete flow. 1. Employee page is loaded in router-outlet(Page component). 2. The user will fill the form and click continue button(Save component). 3. Once user click continue it will go to employee page validates the page if validation is true then it return true and then save component will route to another page. – displayname Oct 16 '17 at 17:57
  • Do you component have a relation ship like parent child ? – Rahul Singh Oct 16 '17 at 18:03
  • Yeah, the two components are siblings.@RahulSingh – displayname Oct 16 '17 at 19:06
  • You could use a service but I think you're overly complicating it. Why can't you have the physical save button on the same component? You're going to get very confused very quickly using this approach. – Andrew Howard Oct 16 '17 at 19:33

0 Answers0