listen to service variable change from component angular

13,451

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)
    })
}
Share:
13,451
David
Author by

David

Updated on June 04, 2022

Comments

  • David
    David over 1 year

    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

    • Ashish Ranjan
      Ashish Ranjan over 4 years
      create a Subject and add value to it when userDetails change, subscribe to the Subject in the component?
    • David
      David over 4 years
      can u write that like answer ?I'm novice in angular
    • Ashish Ranjan
      Ashish Ranjan over 4 years
      Yes, so before I do that where do you eventually need userDetails? in your component? or in the service?
    • David
      David over 4 years
      userDetails are already declared in the service. And service has method to get new data into that variable. What I need is to listen from component to that variable change. and if it changes grab the data to component. So In component I want to have the same userDetails variable updated form service variable on change event.
  • David
    David over 4 years
    this happens only when ngOnInit() problem is that component is already rendered.
  • David
    David over 4 years
    this happens only when ngOnInit() problem is that component is already rendered.
  • David
    David over 4 years
    I've tested it and it only works from the beginning when all components are rendered. but I want it to work also after that when I call that service
  • David
    David over 4 years
    I've tested it and it only works from the beginning when all components are rendered. but I want it to work also after that when I call that service
  • Ashish Ranjan
    Ashish Ranjan over 4 years
    @David: Its a subscription you have created it when you initialized the component and that subscription will keep listening to changes in userDetails throughout until the subscription is killed.
  • David
    David over 4 years
    I'm trying to do it somehow my way, please read the question Update. But I get error. I know that I am doing something wrong, can you check what exactly ?
  • Ashish Ranjan
    Ashish Ranjan over 4 years
    @David: The error says it correct, the service class variable userDetails doesn't have a value in begining (also subscription() won't exist on a normal data type). Did you not follow my answer? I have initialized userDetails as a Subject..
  • Ashish Ranjan
    Ashish Ranjan over 4 years
    @David how do you invoke the "HTTP get" request? is it some button click? I mean when do you call getUserProfile()?
  • David
    David over 4 years
    I call HTTP request get after I login to site. And of course this component inits before this
  • Ashish Ranjan
    Ashish Ranjan over 4 years