Passing function from component to service

Question

I am trying to access the data from service,but it can only be accessed if I call one of component function in service function.Is there anything that I can do?

I tried using callback inside observable but that's not working.Is it a good practice to import component inside service and then call a function?

service.ts:
 serviceFunc1(){
   //I will get some data from here after subscribing
   this.serviceFunc2();
   CompoFunc1(); // Not able to do
   //Calling CompoFunc1() to get items variable(please read entire you'll get it)
}
  serviceFunc2(){
    //I will use the data that came from serviceFunc1() inside api(loop)
    //After subscribing the data I will get some data, that data I will be storing in some variable(assume variable is items)
  }

Component.ts:
  CompoFunc1(){
     //Now I need to acces the variable items inside this component
     //So this.service.items;
     //But to get items I need to call CompoFunc1() inside serviceFunc1 after serviceFunc2()  
 }
 ngOnInit(){
  this.service.serviceFunc1();
}

If any question, feel free to ask.

I just want to access items variable inside component.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321/1260204) — Igor, Jan 31 '19 at 19:23
I am not getting at all what you are asking or trying to do. I guess is that whatever it is you are making it much more complicated than it needs to be. I recommend you [edit] your question and add some actual business logic/reasoning for what it is you are trying to accomplish and why instead of focusing on func1 func2 etc. — Igor, Jan 31 '19 at 20:49

score 0 · Answer 1 · answered Jan 31 '19 at 19:35

0

Your service should not normally call into your component. If it needs data from the component, pass that data from the component to the service in the this.service.serviceFunc1(myData) call.

If you need to do something in the component after the service call, add the code after the call to the service.

Service

Call the http.get here, but don't subscribe

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl)
  }

Component

Call the service here, subscribe, and perform any other required operations.

  ngOnInit(): void {
    this.sub = this.productService.getProducts().subscribe(
      products => {
        this.products = products;
        // Do whatever else needs to be done in the component after receiving the data
      }
    );
  }

Is this what you are trying to do?

answered Jan 31 '19 at 19:35

DeborahK

57,520
12
104
129

mam actually I need to get the value from serivces to component.But I am not able to get it, because the value isn't stored in it.I need to somehow call compoFunc1() after serviceFunc()2, so I can access the data after the value is stored in it. – Robin Hood Jan 31 '19 at 20:18
Can you build a simple stackblitz that demonstrates what you are trying to achieve with a bit more code than you have in your question? – DeborahK Jan 31 '19 at 21:20
I'm not able to share – Robin Hood Feb 01 '19 at 04:03
2

?? We don't need/want your application. Just dummy up something that demonstrates your issue with a bit more logic than what you have posted above. – DeborahK Feb 01 '19 at 05:58

ChadESmith42 · Answer 2 · 2019-01-31T21:37:11.017

You don't need to subscribe to anything from your component.

Within the service, set a function to get the data from the component.

public getData(args: any){
    this.data = args;
}

In your component, send data to the service like so:

this.service.getData(myDataFromComponent);

The service now has the myDataFromComponent dataset stored as this.data.

You mentioned using an API, so I'm assuming an observable is returned.

serviceFunc1(args: any) {
    //This is where you work your magic with the data
}

serviceFunc2(args: any) {
    //Code to process the secondary data here:
}

Make sure you nest your functions so as have that return prior to continuing with your code:

serviceFunc3() {
    this.serviceFunc1.pipe(
      switchMap( results => {
        this.finalAnswer = this.serviceFunc2(results);
        //Additional processing/handling of data;
      })
    );
}

Passing function from component to service

2 Answers2