Passing Data from Service to Component

Question

Before someone mark this as duplicate Below are the links that I tried and failed

Angular 2 - passing data from service to component

How to subscribe to an event on a service in Angular2?

Scenario I want to sent data from my ng2 service to component and the data is being loaded from an API using ng2 HTTP

Below is the dummy code

MyService

@Output() event_callback: EventEmitter<any> = new EventEmitter();

getUserDetails(id)
{
    var user_data;
    this.loadRemoteUrl('getUserdata?user_id=' + id).subscribe(
        data => { user_data = data},
        err => console.error(err),
        () => {
            console.log('Inside My Service');
            this.user_data = user_data;
            this.event_callback.emit(this.user_data);
        }
    );
}

MyComponent

constructor(private http:Http, private myService: MyService) 
{
    var userDetails;
    myService.event_callback.subscribe(
        data => this.callbackFunction()
    );
}

callbackFunction()
{
    console.log("Inside MyComponent")
}

Console Log

Inside My Service

The HTTP request is returning data properly which I tried dumping before emit and it worked but problem is I am unable to access data in my component, I tried passing data,now I am just some logging messages to identify flow but still unable to see the log message from my component file.

What did I miss?

Can you make sure your component subscribes to the service before getUserDetails is called ? — Milad, Dec 20 '16 at 21:40
Where are you calling `getUserDetails`? From another component? Also note that you don't need to put an @Output annotation on a service — rob, Dec 20 '16 at 21:42
It's being called from another method from the component... @rob — Akshay Khale, Dec 20 '16 at 22:23
@Milad Yes, I am sure that component subscribes when the `getUserDetails()` method is called... — Akshay Khale, Dec 20 '16 at 22:25

Jarek · Accepted Answer · 2016-12-21T14:18:47.283

8

In your case instead of @Output i recommend use observable Subject.

In your service, insted of:

@Output() event_callback: EventEmitter<any> = new EventEmitter();

Create new observable source and stream (Remember to import Subject from "rxjs/Subject"):

private eventCallback = new Subject<string>(); // Source
eventCallback$ = this.eventCallback.asObservable(); // Stream

Insted of:

this.event_callback.emit(this.user_data);

Send message by:

this.eventCallback.next(this.user_data);

And then, in your component:

myService.eventCallback$.subscribe(data => {
    this.callbackFunction();
});

See: working example on Plunker

Read more about this solution: Angular.io - Communicate via a service

edited Dec 21 '16 at 14:18

answered Dec 21 '16 at 08:41

Jarek

947
1
7
19

I already tried that didn't work, But as per my knowledge they both work in the same way and `emit` is in latest Angular, where as `next` is in older version, thanks for the efforts... – Akshay Khale Dec 21 '16 at 14:08
2

@AkshayKhale I have added working example on plunker, check it out: https://plnkr.co/edit/Hhc6lTSwGQWP3zq2Ttlu?p=preview – Jarek Dec 21 '16 at 14:19
@jarek Thank you for the plunkr helped me out a ton! One little issue with it. private eventCallback: Subject = new Subject(); Should be private eventCallback: Subject = new Subject(); *removed the array syntax* if you want to pass just a string. – laymanje Jun 16 '17 at 19:45
Yes @Jarek thanks for that Plunkr! – Jonathan Jun 13 '23 at 20:27

Passing Data from Service to Component

1 Answers1