title: Function ngOnChanges() is not working in Angular 5
body: <p>I'm trying to call function <code>ngOnChanges()</code> in my Angular 5.x component whenever the variable <code>this.test</code> in component lifecycle or in template is changed but it's not working, <code>ngOnChanges()</code> function is not called anytime. Please can someone help me?</p>
  
  <p>src/app.ts:</p>
  
  <pre><code>import {Component, NgModule, Input, OnChanges, SimpleChanges} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;input type="text" placeholder="Test field" value="{{ test }}"&gt;
      &lt;/div&gt;
    `,
  })
  export class App implements OnChanges {
    @Input() test: string;
    name: string;
    constructor() {
    }
  
    ngOnChanges(changes: SimpleChanges) {
      console.log('ngOnChanges');
  
      if (changes.test &amp;&amp; !changes.test.isFirstChange()) {
        // exteranl API call or more preprocessing...
      }
  
      for (let propName in changes) {
        let change = changes[propName];
        console.dir(change);
        if(change.isFirstChange()) {
          console.log(`first change: ${propName}`);
        } else {
          console.log(`prev: ${change.previousValue}, cur: ${change.currentValue}`);
        }
      }
    }
  
  
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>Live preview: <a href="https://plnkr.co/edit/ZHFOXFhEkSv2f1U3lehv" rel="nofollow noreferrer">https://plnkr.co/edit/ZHFOXFhEkSv2f1U3lehv</a></p>
  
  <p>Thanks a lot!</p>