title: How to detect changes of @Input() binding with user defined type in Angular 4
body: <p>Following is the example code , for what i am doing.</p>
  
  <p>Model Component</p>
  
  <pre><code>//app.models.ts
  export class Employee{
   Name:string;
   Salary:number;
  }
  </code></pre>
  
  <p>Root Component</p>
  
  <pre><code>//app.component.ts 
  import { Component } from '@angular/core';   
  import { Employee } from './app.models.ts';
  
  @Component({
    selector: 'my-app',
    template: '&lt;input type="text" [(ngModel)]="emp.Name"&gt;&lt;hello [employee]="emp"&gt;&lt;/hello&gt;'
  })
  export class AppComponent  {
    emp:Employee;
    constructor(){
      this.emp=new Employee();
      this.emp.Name="Neeraj";
    }      
  }
  </code></pre>
  
  <p>Child Component</p>
  
  <pre><code>import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
  import { Employee } from './app.models.ts';
  @Component({
    selector: 'hello',
    template: `&lt;h1&gt;{{displayName}}&lt;/h1&gt;`,
    styles: [`h1 { font-family: Lato; }`]
  })
  
  export class HelloComponent implements OnChanges  {
    @Input() employee: Employee;
    displayName:string;
    ngOnChanges(changes: SimpleChanges) {
          console.log('Life cycle hook method called.');
          this.displayName='Hello, '+this.employee.Name;
          }
  }
  </code></pre>
  
  <p>Textbox text changes are not being detecting in the child component.</p>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-3vvuha?file=app%2Fhello.component.ts" rel="nofollow noreferrer">Live Demo</a></strong>  </p>