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
– Milad, Commented Dec 20, 2016 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
– rob, Commented Dec 20, 2016 at 21:42
It's being called from another method from the component... @rob — Akshay Khale
– Akshay Khale, Commented Dec 20, 2016 at 22:23
@Milad Yes, I am sure that component subscribes when the getUserDetails() method is called... — Akshay Khale
– Akshay Khale, Commented Dec 20, 2016 at 22:25

Jarek · Accepted Answer · 2016-12-21 14:18:47Z

9

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, 2016 at 14:18

answered Dec 21, 2016 at 8:41

Jarek

9971 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akshay Khale Over a year ago

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...

Jarek Over a year ago

@AkshayKhale I have added working example on plunker, check it out: plnkr.co/edit/Hhc6lTSwGQWP3zq2Ttlu?p=preview

laymanje Over a year ago

@jarek Thank you for the plunkr helped me out a ton! One little issue with it. private eventCallback: Subject<any[]> = new Subject<any>(); Should be private eventCallback: Subject<any> = new Subject<any>(); removed the array syntax if you want to pass just a string.

Collectives™ on Stack Overflow

Passing Data from Service to Component

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related