Angular2: Communication between sibling components

Question

I have the following structure of an Angular2 application.

Inside app.html file

<search></search>
<search-results></search-results>

Both SearchComponent and SearchResultsComponent are separate components. I also have a service like below

Inside service file

....
  getFilteredData(input:string): Observable <any>{
    return this.http.get(`${this.URL}${input}&api_key=DEMO_KEY`)
      .map(response => response.json())
      .catch((error:any) => Observable.throw(error.json().error || 'server error'));
  }
....

Inside of the SearchComponent I have a template with an input field and button like so:

....
    <input type="text" class="form-control" id="input"
       [(ngModel)]="model.input" name="input" #ipnut="ngModel">
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
....

Problem: What is the best way to let the service execute and pass the results to the SearchResultsComponent? I know I should subscribe to the Observable getFilteredData, but how do I initiate the search itself (i.e. pass the data from form input to the service once the button is clicked)

Answer 1

Create a master service ( which is instantiated once and used up by both the search and search-result component ).

Inside this service create a Subject ( Behavior Subject or Replay Subject ).

Use this Subject in search component to emit the data in this case search word.

Now Subscribe to this Subject in search-result component and in its success call your "getFilteredData" function with parameters here search-word which you got from subscribing to the Subject.

I hope this helps.