Angular 4 issue with sharing data information between components

Question

I'm developing Angular 4 app, user registers with facebook and then redirects to form wizard, where he have to fill 5 forms step by step, on each step data will be saved ideally in an object and same object will keep record of previously filled all forms plus next coming forms.

This page has:

1. HEADER (component) which contains

   • Logo
   • Bullets to show active, currently active and disabled steps (component)
   • Logged user name and image (component)

2. SIDEBAR (component)

3. CONTENT area which contains

   • Card (Component) having nested components for different Form

I have to keep record of which step's form user is currently filling and how many have been filled so he can navigate back and forth up to the last form being filled, the other steps remain disabled until user reaches them filling one by one.

The content area has which loads card (component) and there's nested form (component).

Issue is I'm not finding proper solution how to structure code so I can share data between all components to keep record of active and current steps, which are indicated on left sidebar and in the header bullets

following is layout of my page.

Answer 1

You could use a Service which you share between all your components.

Basically what you do is, store the information in a place(the service) which then is injected in each component where you need the information.