Angular Material Datepicker: Change Event Not Firing When Selecting Date

Answer :

There's a dateChange event that's raised both when the date is edited in the text box and when the date is changed via the calendar control. See here

<mat-form-field>   <input matInput [matDatepicker]="datepicker" required placeholder="Choose a date" (dateChange)="valueChanged()">   <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>   <mat-datepicker #datepicker></mat-datepicker> </mat-form-field> 

Replace change with ngModelChange

Change from

<input mdInput         [mdDatepicker]="datePicker"         placeholder="Choose Date"         name="date" [(ngModel)]="date"         (change)="updateCalcs()" required> 

To

<input mdInput         [mdDatepicker]="datePicker"         placeholder="Choose Date"         name="date" [(ngModel)]="date"         (ngModelChange)="updateCalcs()" required> 

<mat-form-field>   <input matInput [matDatepicker]="picker" placeholder="Input & change events"          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>   <mat-datepicker #picker></mat-datepicker> </mat-form-field> 

And .ts

addEvent(type: string, event: MatDatepickerInputEvent<Date>) {     //console.log(event.value) } 

Check here