Angular 5 communicating between components through service

Question

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.

They both interact with the API through a service with two functions:

addCandidate(candidate: Candidate): Observable<Candidate> {
  this.candidatesList.next(this.http.get(this.apiUrl));
  return this.http.post<Candidate>(this.apiUrl, candidate, httpOptions);
} 

listCandidates(): Observable<Candidate[]> {
  return this.http.get(this.apiUrl).map(res => <Candidate[]>res);
}

The components have methods for subscribing to the service:

saveCandidate(): void {
  if(this.candidate.skills.indexOf(', ') >= 0) {
    this.candidate.skills = (<string>this.candidate.skills).split(', '); 
  }
  this.candidatesService.addCandidate(this.candidate).subscribe();
}

And respectively ( this one is on init ) :

ngOnInit() {
  this.candidatesService.listCandidates().subscribe(candidates => this.candidates = candidates);
}

So, hence i can't really know when the api is updated, i want to update the list after saveCandidate() method takes action.

How does one update one component with new api data after another submitted to the servic?.

Side note: i tried using rxjs Subject.asObservable().next(..the http request). But Observable.next is not a method. Maybe i misused them.

I have given a similar example here https://stackoverflow.com/questions/49007399/changes-done-in-one-component-view-doesnt-reflect-in-another-component-view-in/49008521#49008521 — GSSwain, Feb 28 '18 at 04:56
Have a look on this : https://stackoverflow.com/questions/48760281/how-to-pass-the-value-and-get-the-value-from-another-page-via-routerlink-in-angu/48760344#48760344 — S K, Feb 28 '18 at 05:00

Arjun Panicker · Accepted Answer · 2018-02-28T04:18:20.820

The method you tried (i.e, Subject) is the correct way to approach this problem.

Use this link for improving your understanding on Subject and follow these points:

Declare the subject in the service
In the component where you are posting data, make the subject emit an event with a string value (let's say, 'Data Changed') using the code this.candidatesService.mySubject.next('Data Changed').
Subscribe to this Subject in the component where you are listing the data and call your service method to get your data inside the subscribe method like this:

this.candidatesService.mySubject.subscribe((value) => { this.candidatesService.listCandidates().subscribe(candidates => this.candidates = candidates); });

This should solve your problem.

Thank you very much. This seems to have been it.Guess i have much to learn on angular. — Gabriel, Feb 28 '18 at 14:47

score 2 · Answer 2 · answered Feb 28 '18 at 04:00

You can create a service with a BehaviorSubject that will store the state object, e.g. a collection of candidates. One component will use next() on the subject to add the candidate, and another will subscribe to get the current list of candidates. I recorded a 20-min video that can help you in understanding how this can be implemented: https://www.youtube.com/watch?v=NYNEH_k0e_4

Angular 5 communicating between components through service

2 Answers2