title: Angular 7 - How to handle a change event for a mat-datepicker when it's value is bound to an optional input parameter
body: <p>I am fairly new to angular development. I have a <code>mat-datepicker</code> whose value is bound to <code>filterDate</code> via <code>[(ngModel)]</code> which also happens to be an <code>@Input()</code> parameter. Whenever the value of DatePicker changes, I'm firing a handleChange event which emits the datepicker value.
  During execution, This component might receive the Input from any parent component. Although the new value is being rendered in the browser, no change event is being fired.</p>
  
  <p>As this is Angular 7, I'm not able to use <code>(ngModelChange)</code>. I've tried adding (change) event and also using <code>Subject&lt;Date&gt;</code> for manually subscribing to changes but unfortunately, none of these seem to work.</p>
  
  <p>component.html</p>
  
  <pre><code>&lt;input matInput [matDatepicker]="startPicker" [(ngModel)]="filterDate"
        (click)="startPicker.open()" (dateChange)="handleChange($event)"&gt;
  &lt;mat-datepicker-toggle matSuffix [for]="startPicker"&gt;&lt;/mat-datepicker-toggle&gt;
  &lt;mat-datepicker #startPicker ng-model-options="{ timezone: 'utc'}"&gt;&lt;/mat-datepicker&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>@Input() filterDate: Date;
  @Output() filterEvent = new EventEmitter&lt;any&gt;();
  
  constructor(private datePipe: DatePipe) {
  }
  
  ngOnInit() {
  }
  
  handleChange(event) {
      this.filterEvent.emit(this.datePipe.transform(event.target.value, 'dd MMM yy'));
  }
  </code></pre>