title: Angular how to subscribe to interface changes?
body: <p>I am trying to subscribe to my interface and watch for changes, but I have errors. </p>
  
  <ol>
  <li><p>Getting data from api and asigning it to this.candidateProfile : </p>
  
  <pre><code> export interface CandidateProfile {
   about: string,
   c_id: {},
   certificates_training: [],
   city: string,
   country: string,
   currency: string,
   email: string,
   expectedpayhourly: boolean,
   expectedpayhourlyend: number,
   expectedpayhourlystart: number,
   expectedpaymonthly: {},
   expectedpaymonthlyend: number,
   expectedpaymonthlystart: number,
   experience: [],
   firstname: string,
   hobbies: {},
   jobskills: [],
   langugaes: {},
   lastname: string,
   personalskills: [],
   photo: string,
   remotework: boolean,
   role: string,
   studies: {},
   willingtorelocate: {},
   willingtorelocatecity: {},
   worktype: string
    }
  </code></pre></li>
  </ol>
  
  <p>Auth.service.ts : </p>
  
  <pre><code>candidateProfile: Observable&lt;CandidateProfile&gt;;
  
  getProfile(id, token) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    })
  };
  
  this.http.get(`users/${id}`, httpOptions).subscribe(data =&gt; {
    this.candidateProfile = data;
  },
    (error) =&gt; { console.log(error) },
    () =&gt; {
      console.log('got profile', this.candidateProfile);
    })
  
   }
  </code></pre>
  
  <p>Component.ts : </p>
  
  <pre><code>this.auth.candidateProfile.subscribe( data =&gt; {
  console.log(data)
  })
  </code></pre>
  
  <p>error : </p>
  
  <h2>this.auth.candidateProfile.subscribe is not a function</h2>