Angular 4 Data in Service, passing to component(s)

Question

Have some data in a service, and was working perfectly when I had data in an object sitting on the service, but now that I've hooked up a database connection, the data never makes it to the component.

I want the service to subscribe to the data coming back from the database and have defined the call like this:

  public setPerson(ac: string): void{
    console.log(ac);
    this.generatePerson(ac).subscribe((data) => {
        // this.mapPersonFromInput(data[0]);
        console.dir(data);
    });

  }

The mapPersonFrominput() function is a holdover from mocked data. it is essentially the same as extractData further below, but from a static object in the code.

generatePerson looks like this:

public generatePerson(id: string):Observable<Person>{
    var datRetUrl: string = '/api/'
    var fullUrl: string = datRetUrl + id;
    return this.http.get(fullUrl)
                .map(this.extractData)
                .catch(this.handleError);
  }

extractData simply assigns values from the input object to the service's object structure, and handleerror simply logs the error to the console.

I call the service to initialize the data object from the component before the component loads by calling this function from a navigation component:

  passCodeToService():void{
    this.psn.setPerson(this.accessCode);
    this.route.navigate(['/name']);
  }

and in the actual component that should get the data, I'm using ngOnInit, but I think I should be using ngOnChanges to initialize the component. Here's the code that I'm currently using, but haven't had luck fixing just yet.

ngOnInit() {
  this.name =this.psn.getName();
  console.log(this.name);
}

getName() simply returns the object that I'm storing in the service.

  public getName(): Name{
    return this.servicePerson.name;
  }

A couple of things - first, what does the *this.mapPersonFromInput(data[0]);* do? Second, where is the *this.psn.getName();* from your example in the init method? — JSess, Aug 02 '17 at 14:18
Where are you calling `.subscribe()` on the `generatePerson()` and have you seen [communicating via a subject](https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service) — 0mpurdy, Aug 02 '17 at 14:48
it was just the way I've done it before, but that was based of a one-to-one communication between component and service. and Yes! I just found that article. Looking like it's a good start! — Chris Rutherford, Aug 02 '17 at 14:56

Lansana Camara · Accepted Answer · 2017-11-29T14:10:02.820

You should not use ngOnChanges here, it is not meant for what you are trying to do.

According to your question, this is what you are trying to achieve:

Fetch data from DB
Your component should be able to get a piece of that data asynchronously

You can achieve this with the code you have. All you need to do is add a little more code and leverage RxJS. More specifically:

Create a person subject in your person service
When data comes back from your DB, do personSubject.next(dataFromDB) to add to the person stream.
Create a function that will return the person subject as an observable, and then you can subscribe to that observable from your component

With this approach, every time data comes from your DB, that data will be added to a person stream, and anything subscribing to that stream (your component) will get the data.

Quick example (since I don't have your full code):

import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class PersonService {
    // The person subject
    personStream: ReplaySubject<Person> = new ReplaySubject();

    // The person observable
    person$(): Observable<Person> {
        return this.personStream.asObservable();
    }

    // Get person from DB and add to stream
    getDataFromDB() {
        this.http.get(url).subscribe(response => {
            this.personStream.next(response.person);
        });
    }
}

@Component({...})
export class MyComponent implements OnInit {
    person: Person;

    constructor(private personService: PersonService) {}

    ngOnInit() {
        // Subscribe to person observable. Any time person data changes, this will be called.
        this.personService.person$().subscribe(person => this.person = person);

        // If you return the `this.http.get(url)` from `getDataFromDB`, you can just do this instead...
        this.personService.getDataFromDB().subscribe(person => this.person = person);
    }
}

But this is all overkill, because in reality all you need to do is subscribe to the getDataFromDB function in your component, since that itself can return an observable of Person type.

Yeah, but I like the idea and there are five sub components that need data from the service, so this may not be overkill, the problem as presented is simplistic compared to the actual project. — Chris Rutherford, Aug 02 '17 at 15:03
I see, that's a good point. Well I was just trying to make it potentially as simple as possible :P But yes, this is generally a good practice to follow with observable streams. — Lansana Camara, Aug 02 '17 at 15:04
what kind of imports should be used with this? ReplaySubject From ?? everything else looks standard — Chris Rutherford, Aug 02 '17 at 15:06
nice! thanks! implementing now! wish I could give you a +1 or something — Chris Rutherford, Aug 02 '17 at 15:20
No problem! Make sure you *DO NOT* do `import { ... } from 'rxjs'`, because that includes the entire rxjs library, and if you do that multiple places your build size will increase in parallel. Also, you can upvote or accept the answer if it works for you. — Lansana Camara, Aug 02 '17 at 15:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150846/discussion-between-chris-rutherford-and-lansana). — Chris Rutherford, Aug 02 '17 at 15:49

Angular 4 Data in Service, passing to component(s)

1 Answers1

Linked