listen to service variable change from component angular

Question

I have service with variable and method that brings data to that variable

export class UserService {
  userDetails;
  getUserProfile(){
    return this.http.get(this.BaseURI+'/UserProfile').subscribe(
      res=>{
        this.userDetails=res;
      //  console.log(res);
      },
      err=>{
        console.log(err);
      }
    );
  }

now I want to check from component when the variable changes and read it. How can I do that ?

UPDATE.

export class UserService {
  userDetails;

  getUserProfile(){
  this.http.get(this.BaseURI+'/UserProfile').subscribe(
    res=>{
      this.userDetails=res;
    },
    err=>{
      console.log(err);
    }
  )
  }

In component I have this:

  ngOnInit() {
    this.service.userDetails.subscribe((userDetails) =>this.userDetails=userDetails)
  }

Now When I run the app I get error in component:

AppComponent.html:2 ERROR TypeError: Cannot read property 'subscribe' of undefined

Answer 1

I believe you basically need the data in the component when your get request is completed.

Solution 1: Consider making userDetails as an Observable, . This way you could listen to it when the value in it changes

export class UserService {

    private _userDetails: Subject<any> = new Subject<any>();    // consider putting the actual type of the data you will receive
    public userDetailsObs = this._userDetails.asObservable();
    getUserProfile(){
        return this.http.get(this.BaseURI+'/UserProfile').subscribe(
          res=>{
            this._userDetails.next(res)
          //  console.log(res);
          },
          err=>{
            console.log(err);
          }
        );
    }
}

Inside your component(s)

constructor(private _userService: UserService) {}

ngOnInit() {
    this._userService.userDetailsObs.subscribe((userDetails) => {
        console.log(userDetails)
    })
}

---

Solution 2. Consider just returning the HTTP observable itself.

getUserProfile(){
    return this.http.get(this.BaseURI+'/UserProfile');
}

Inside your component(s)

constructor(private _userService: UserService) {}

ngOnInit() {
    this._userService.getUserProfile.subscribe((userDetails) => {
        console.log(userDetails)
    })
}

Answer 2

Have your service just have this:

export class UserService {
  getUserProfile(){
   return this.http.get(this.BaseURI+'/UserProfile');
 );
}

Then in your component, you subscribe to it.

import { Component, OnInit } from '@angular/core';
import {ServiceName} from '../servicename.service';

export class ViewComponent implements OnInit {

    constructor(private serviceName:ServiceName) { }
    public userDetails={};
    ngOnInit() {
        this.serviceName.getUserProfile().subscribe({
            next: res=> {this.userDetails=res}
        });
    }
}