title: Angular 4 mat-datepicker date changed event
body: <p>I have the following date picker in my app:</p>
  
  <pre><code>&lt;mat-form-field&gt;
  &lt;input mdInput
     [matDatepicker]="dp3"
     placeholder="Select Birthday"
     name="birthday"
     disabled&gt;
  &lt;mat-datepicker-toggle matSuffix
       [for]="dp3"&gt;
  &lt;/mat-datepicker-toggle&gt;
  &lt;mat-datepicker #dp3 disabled="false"&gt;
  &lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>when the page load the birthday value is written in the matInput, but when I change the date via the calendar popup, the date does not change.</p>
  
  <p>I've tried to to bind to (change) event but nothing happens.
  When I remove the ngModel I can see that the date in the matInput actually changes.</p>
  
  <p>I am using angular 4, this is my package,json:</p>
  
  <pre><code>"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular-mdl/core": "^4.0.7",
    "@angular-mdl/datepicker": "0.0.4",
    "@angular-mdl/expansion-panel": "^5.0.0",
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^5.2.2",
    "@angular/common": "^4.3.2",
    "@angular/compiler": "^4.3.2",
    "@angular/core": "^4.3.2",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.3.2",
    "@angular/http": "^4.3.2",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^4.3.2",
    "@angular/platform-browser-dynamic": "^4.3.2",
    "@angular/router": "^4.3.2",
    "@angular2-mdl-ext/expansion-panel": "0.0.1",
    "@angular2-mdl-ext/popover": "^0.6.0",
    "@angular2-mdl-ext/select": "^0.10.3",
    "@cloudinary/angular": "^2.1.1",
    "@cloudinary/angular-4.x": "^1.0.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/db": "^2.0.2",
    "@ngrx/effects": "^2.0.3",
    "@ngrx/notify": "^1.0.0",
    "@ngrx/router-store": "^1.2.6",
    "@ngrx/store": "^2.2.2",
    "@ngrx/store-devtools": "^3.2.4",
    "angular-2-local-storage": "^1.0.1",
    "angular-star-rating": "^3.0.3",
    "angular2-busy": "^2.0.4",
    "angular2-infinite-scroll": "^0.3.42",
    "angular2-mdl": "^2.13.2",
    "angular2-moment": "^1.8.0",
    "angular2localization": "^1.4.2",
    "moment": "^2.20.1",
    "ngrx-store-freeze": "^0.1.9",
    "ngrx-store-localstorage": "^0.1.8",
    "ngrx-store-logger": "^0.1.8",
    "ngx-chips": "^1.4.5",
    "ngx-infinite-scroll": "^0.5.1",
    "normalizr": "^3.2.3",
    "npm": "^5.3.0",
    "primeng": "^4.1.0-rc.2",
    "reselect": "^3.0.1",
    "rxjs": "^5.4.0",
    "sha.js": "^2.4.11",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "1.2.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.2",
    "typescript": "~2.3.3",
    "webpack": "^3.11.0"
  }
  </code></pre>
  
  <p>what am I missing?</p>