javascript - Angular 4 issue with sharing data information between components -

i'm developing angular 4 app, user registers facebook , redirects form wizard, have fill 5 forms step step, on each step data saved ideally in object , same object keep record of filled forms plus next coming forms.

this page has:

1. header (component) contains

   • logo
   • bullets show active, active , disabled steps (component)
   • logged user name , image (component)

2. sidebar (component)

3. content area contains

   • card (component) having nested components different form

i have keep record of step's form user filling , how many have been filled can navigate , forth last form being filled, other steps remain disabled until user reaches them filling 1 one.

the content area has loads card (component) , there's nested form (component).

issue i'm not finding proper solution how structure code can share data between components keep record of active , current steps, indicated on left sidebar , in header bullets

following layout of page.

you use service share between components.

basically is, store information in place(the service) injected in each component need information.