title: changeDetection: ChangeDetectionStrategy.OnPush doesn't seem to be working?
body: <p><strong><a href="https://stackblitz.com/edit/angular-xpamld" rel="noreferrer">https://stackblitz.com/edit/angular-xpamld</a></strong></p>
  
  <p><strong>Question:</strong> Can someone help me understand why my prototype's <code>changeDetection: ChangeDetectionStrategy.OnPush</code> still allows me to update the inner value <code>name</code>? If this is not what <code>ChangeDetectionStrategy.OnPush</code> suppose to prevent, what should it be doing?</p>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ],
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class AppComponent  {
    public name = 'Angular 5';
    public changeName() {
      this.name = 'Outer';
    }
  }
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;hello name="{{ name }}"&gt;&lt;/hello&gt;
  &lt;button (click)="changeName()"&gt;Outter Change&lt;/button&gt;
  &lt;p&gt;{{name}}-- outer&lt;/p&gt;
  &lt;p&gt;
    Start editing to see some magic happen :)
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>hello.component.ts:</strong></p>
  
  <pre><code>@Component({
    selector: 'hello',
    template: `&lt;h1&gt;Hello {{name}}!&lt;/h1&gt; &lt;button (click)="changeName()"&gt;inner Change&lt;/button&gt;`,
    styles: [`h1 { font-family: Lato; }`],
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class HelloComponent  {
    @Input() name: string;
  
  
    public changeName() {
      this.name = 'Inner';
    }
  }
  </code></pre>