CODEWITHSUNDEEP
angulartypescript
user11135712
user11135712

Reputation:

Angular Service method with subscribe get result on component variable

I have a service with a method. This method subscribes in the service and not in the component. The result is in message.content.

Here is the code:

Service Method:

myMethod() {
    this.socket$.subscribe(
        (message) => {
          console.log(`${message.content}`);
        }
    );
}

App Component

contentVariable;
ngOnInit() {
    this.myservice.myMethod();
}

My question is...how do I get message.content from the service into contentVariable in my component?

Upvotes: 2

Views: 1802

Answers (6)

Amit B
Amit B

Reputation: 5

There can be two options.

as per your code, you have to return the message result so that you can access into your component method.

In service,

myMethod() {

this.socket$.subscribe(
    (message) => {
      return message.content
    }
);

}

Edit:

If you are making any api call in service, for ex, you can subscribe like below mentioned:

service:

url = 'localhost:3000';

api = ${url}/api/get/users;

getUsers() {

return this.http.get(api)

}

component: ngOnInit() {

this.service.getUsers().subscribe((res)=>{

console.log(res)

})

}

Upvotes: 0

Igor
Igor

Reputation: 62238

Your service method needs to return the observable. You can use tap to view the data without subscribing, that will allow your service to log it as you were trying to do. The component then subscribes to the returned observable. Service

import { tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

// class name, constructor, etc omitted

myMethod() : Observable<{content: string}> {
    return this.socket$.pipe(tap((message) => console.log(`${message.content}`)));
}

Component

contentVariable;
ngOnInit() {
    this.myservice.myMethod().subscribe(_ => this.contentVariable = _.content);
}

Upvotes: 0

Amit Chigadani
Amit Chigadani

Reputation: 29745

You have to make use of Subject to achieve this.

Service Method:

content$ : Subject<string> = new Subject<string>()
myMethod() {
    this.socket$.subscribe(
        (message) => {
          this.content$.next(message.content)
          console.log(`${message.content}`);
        }
    );

  }

App Component

contentVariable;

ngOnInit() {   
    this.myservice.content$.subscribe(content => this.contentVariable = content)
    this.myservice.myMethod();
}

Upvotes: 0

D&#225;niel Barta
D&#225;niel Barta

Reputation: 1147

I would subscribe from the component, however, you can set a property in your service:

myMethod() {

    this.socket$.subscribe(
        (message) => {
          this.content = this.message.content;
        }
    );

  }

and use that property of the service in your component.

Upvotes: 0

rcanpahali
rcanpahali

Reputation: 2643

Simply return message.content from your service.

Service side:

myMethod() {
this.socket$.subscribe(
    (message) => {
      return message.content;
    });

}

Component side:

contentVariable: any;

ngOnInit() {

   this.contentVariable = this.myservice.myMethod();
}

Upvotes: 0

Nithya Rajan
Nithya Rajan

Reputation: 4884

You can use promises to return a value from the subscribe method. 

myMethod() {

    return new Promise(resolve=>{ 
       this.socket$.subscribe(
        (message) => {
          resolve(message.content);
        }
    );
   });

  }

In your component.ts, use the promise then() method to assign the value to contentVariable

contentVariable;

  ngOnInit() {


    this.myservice.myMethod().then(val => this.contentVariable = val);


  }

Upvotes: 4

Related Questions