title: angular 4 - watch property of a variable for change
body: <p>I want to watch the nested property of a json. Whenever this nested property changes call a fn().</p>
  
  <pre><code>export class HeaderComponent  {
    user: any;
  
    constructor(){
      this.user = {
        options: [
          { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' },
          { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' },
          { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' }
        ],
        selected: { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' }
      }
    }
  </code></pre>
  
  <p><strong>Fn changes values</strong></p>
  
  <pre><code>public changeUser(item) {
      this.user.selected = item;
      /*Some Code here*/
  }
  
    public customLogin(user) {
          /*Some Code here*/
          this.user.selected = user;
          /*Some Code here*/
  }
  </code></pre>
  
  <p>Whenever the value of  <code>this.user.selected</code> changes call a function.
  I'm using <code>rxjx</code> as well.</p>
  
  <p>Any suggestion?? </p>