title: ngOnChanges does not work when value is passed from parent to child
body: <p>Why does ngOnChanges not get triggered even after the value of <code>child_message</code> is changing? I see that ngDocheck() gets triggered when value is passed from parent to child. However it gets triggered multiple times and not only when value is passed but also when component is initialized.I want something that gets triggered when value is changed after initialization.</p>
  
  <p><strong>ParentComponent.ts</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit,ViewChild,AfterViewInit, OnChanges, Input } from '@angular/core';
  import { ChildComponent } from '../child/child.component';
  
  @Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.css']
  })
  export class ParentComponent implements OnInit,OnChanges{
    parent_message = "parent talking";
    @Input() clicked:boolean =false;
  
    constructor() { }
  
    ngOnInit(){
      //subscribing to message !!
      //this.data.currentMesssage.subscribe(message =&gt; this.message =message)
    }
    ngOnChanges(){
      console.log("change occured")
    }
    onClick(){
      this.clicked = true;
    }
  }
  
  </code></pre>
  
  <p><strong>ParentComponent.html</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>   &lt;h1&gt;Parent &lt;/h1&gt;
  Message:{{message}}
  &lt;button (click)='onClick()'&gt;Send Message&lt;/button&gt; 
  &lt;div *ngIf="clicked; else notclicked"&gt;
      &lt;app-child  [childMessage]="parent_message"&gt; &lt;/app-child&gt;
  &lt;/div&gt;
  &lt;ng-template #notclicked&gt;
      &lt;app-child&gt; &lt;/app-child&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>ChildComponent.ts</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>    import { Component, OnInit ,Input, Output,EventEmitter,OnChanges,DoCheck} from '@angular/core';
  
  @Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css'],
  })
  export class ChildComponent implements OnChanges, DoCheck{
    @Input() childMessage: string ="child here ";
    //@Output()messageEvent = new EventEmitter&lt;string&gt;();
    constructor() { }
    ngOnChanges(){
      console.log("change occured");
    }
    ngDoCheck(){
      console.log("ngDoCheck");
    }
  }
  
  </code></pre>
  
  <p><strong>ChildComponent.html</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>   &lt;h1&gt;Child&lt;/h1&gt;
  Say:{{childMessage}}
  
  </code></pre>