title: Angular 4: View is not updating after model change?
body: <p>I have two <code>component</code> in my app ie: <code>HeaderComponent</code> &amp; <code>TestComponent</code>. In <code>HeaderComponent</code>, There is a method name <strong>setUserData()</strong>.
  I am calling this <strong>setUserDate()</strong> from <strong>TestComponent's method <code>ansSubmit()</code></strong> which is in file <code>test.component.ts</code>.</p>
  
  <p>Now <code>setUserDate()</code> is calling and value is coming in <code>setUserDate()</code> method. </p>
  
  <p><strong>The problem is :</strong> when <code>setUserDate()</code> calling , I am setting score value into <strong>this.userData.score</strong>, And <strong>this.userData.score</strong> value is binding in view ( HTML ) but the coming value from 
  <strong>TestComponent's method ansSubmit() is not going to update on the view</strong> but the value is present in the <code>ts</code> file ( I am printing in console).</p>
  
  <p><strong>Here is the code:</strong></p>
  
  <p><strong>test.component.ts:</strong></p>
  
  <pre><code>import { HeaderComponent } from '../../components/header/header.component';
  @Component({
    selector: 'test-page',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css'],
    providers: [HeaderComponent]
  })
  
  export class TestComponent implements OnInit {
    private userData: any = {};
  
    constructor(private _router: Router, private headerComponent: HeaderComponent) { }
  
    ansSubmit() {
      const logged_in_user = new LocalStorage(environment.localStorageKeys.ADMIN);
      this.userData = logged_in_user.value;
      this.userData['score'] = parseInt(this.userData.score) + 54321 
  
      this.headerComponent.getUserData(this.userData['score']); // Calling HeaderComponent's method  value is 54321.
    }
  }
  </code></pre>
  
  <p><strong>test.component.html:</strong></p>
  
  <pre><code> &lt;div class="col-2"&gt;
       &lt;button (click)="ansSubmit()" &gt;
            &lt;div&gt;Submit Answer&lt;/div&gt;
        &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>header.component.ts:</strong></p>
  
  <pre><code>import {
    Component, OnInit, ChangeDetectorRef, NgZone, ApplicationRef, ChangeDetectionStrategy
  } from '@angular/core';
  
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css'],
  
  })
  
  export class HeaderComponent implements OnInit {
      public userData : any = {
        score:2000,
     };
  
    getUserData(score) { // score= 54321  ( value is coming )  
         this.userData.score = score ;
         console.log(this.userData.score);  // in this.userData.score = 54321  ( Value is assigning )
       } 
    }
  }
  </code></pre>
  
  <p><strong>header.component.html:</strong></p>
  
  <pre><code>&lt;span class="topbar-details"&gt;
              Scrore : {{userData.score }}  // actual problem is here, Its not updating value. Its only showing 2000.
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>Please suggest me how to resolve this issue. Thanks in advance.</strong></p>