title: Angular 5 communicating between components through service
body: <p>i am working on an Angular 5 application and i have an API that store my data. The thing is i have two components, one for displaying data and one for posting data. </p>
  
  <p>They both interact with the API through a service with two functions:</p>
  
  <pre><code>addCandidate(candidate: Candidate): Observable&lt;Candidate&gt; {
    this.candidatesList.next(this.http.get(this.apiUrl));
    return this.http.post&lt;Candidate&gt;(this.apiUrl, candidate, httpOptions);
  } 
  
  listCandidates(): Observable&lt;Candidate[]&gt; {
    return this.http.get(this.apiUrl).map(res =&gt; &lt;Candidate[]&gt;res);
  }
  </code></pre>
  
  <p>The components have methods for subscribing to the service:</p>
  
  <pre><code>saveCandidate(): void {
    if(this.candidate.skills.indexOf(', ') &gt;= 0) {
      this.candidate.skills = (&lt;string&gt;this.candidate.skills).split(', '); 
    }
    this.candidatesService.addCandidate(this.candidate).subscribe();
  }
  </code></pre>
  
  <p>And respectively ( this one is on init ) :</p>
  
  <pre><code>ngOnInit() {
    this.candidatesService.listCandidates().subscribe(candidates =&gt; this.candidates = candidates);
  }
  </code></pre>
  
  <p>So, hence i can't really know when the api is updated, i want to update the list after saveCandidate() method takes action.</p>
  
  <p><strong>How does one update one component with new api data after another submitted to the servic?.</strong></p>
  
  <p><em>Side note: i tried using rxjs Subject.asObservable().next(..the http request). But Observable.next is not a method. Maybe i misused them.</em></p>