title: Angular 8.0 Data share among component and service
body: <p>I am working to automate a manual form. I am new to angular. </p>
  
  <p>I have a stepper control in app.component with 5 steps. I have created 5 component and placed one inside each stepper. </p>
  
  <pre><code>&lt;mat-step label="Start"&gt;
      &lt;app-project-location&gt;&lt;/app-project-location&gt;            
  &lt;/mat-step&gt;    
  &lt;mat-step [stepControl]="licensedContractorFormGroup" label="Property Owner Information"&gt;
      &lt;app-property-owner&gt;&lt;/app-property-owner&gt;      
  &lt;/mat-step&gt;
  &lt;mat-step [stepControl]="licensedContractorFormGroup" label="Project In Charge"&gt;
      &lt;app-project-in-change-details&gt;&lt;/app-project-in-change-details&gt;
  &lt;/mat-step&gt;
  </code></pre>
  
  <p>Each inner component above has buttons to navigate to <code>previous</code> and <code>next</code>.</p>
  
  <p>When I fill the <code>&lt;app-project-location&gt;</code> form and submit next, this form takes the form input, calls the service which call the API, and returns the data fill in the next component table. </p>
  
  <p><strong>Question:</strong> </p>
  
  <p>How can I pass the form data from this component to another component which has no parent child relationship?</p>
  
  <p>I have called the service and it returns a JSON object, How can I make it return as observables? </p>