title: listen to service variable change from component angular
body: <p>I have service with variable and method that brings data to that variable</p>
  
  <pre><code>export class UserService {
    userDetails;
    getUserProfile(){
      return this.http.get(this.BaseURI+'/UserProfile').subscribe(
        res=&gt;{
          this.userDetails=res;
        //  console.log(res);
        },
        err=&gt;{
          console.log(err);
        }
      );
    }
  </code></pre>
  
  <p>now I want to check from component when the variable changes and read it. How can I do that ?</p>
  
  <p><strong>UPDATE.</strong></p>
  
  <pre><code>export class UserService {
    userDetails;
  
    getUserProfile(){
    this.http.get(this.BaseURI+'/UserProfile').subscribe(
      res=&gt;{
        this.userDetails=res;
      },
      err=&gt;{
        console.log(err);
      }
    )
    }
  </code></pre>
  
  <p>In component I have this:</p>
  
  <pre><code>  ngOnInit() {
      this.service.userDetails.subscribe((userDetails) =&gt;this.userDetails=userDetails)
    }
  </code></pre>
  
  <p>Now When I run the app I get error in component:</p>
  
  <blockquote>
    <p>AppComponent.html:2 ERROR TypeError: Cannot read property 'subscribe'
    of undefined</p>
  </blockquote>