title: How to pass form data to another component through a service?
body: <p>I have a search form on my Angular 2(8) page and I want to gather form data, give it to search service, perform a search/filtering (if needs be) and then pass the results to the rendering somponent, thus navigating user to another page.</p>
  
  <p>Now, in my form.component.html I have:</p>
  
  <pre><code>&lt;form #f="ngForm" (ngSubmit)="onSubmit(f)"
     fxLayout="column" fxLayoutAlign="start start"&gt;
     // some form fields
     &lt;button 
       type="submit" 
       mat-raised-button 
       color="primary"
       [disabled]="f.invalid"&gt;Search&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So, the form.component.ts has the onSubmit method:</p>
  
  <pre><code>onSubmit(form: NgForm) {
    const searchForm = form.value as SearchForm;
    console.log(searchForm);
  }
  </code></pre>
  
  <p>And this is where my question begins: I want pass data to the searchService, maybe something like:</p>
  
  <pre><code>this.searchService.performSearch(searchForm)
    .subscribe(
      () =&gt; {
        router.navigate('/results');
      },
      () =&gt; { }
      );
  </code></pre>
  
  <p>Then I want to access this data in my search.component.ts:</p>
  
  <pre><code>results = Result[];
  </code></pre>
  
  <p>And in the search.component.html:</p>
  
  <pre><code>&lt;app-search-item *ngFor="let result of results" [result]="result"&gt;
  &lt;/app-search-item&gt;
  </code></pre>
  
  <p>How can I implement such a behavior?</p>