Angular - How to fire a function when user selects a date range in mat-date-range-picker?

Question

I am trying to run a function when user selects a date range in MatDateRangePicker. https://material.angular.io/components/datepicker/api

Here is the stackblitz https://stackblitz.com/edit/angular-gxbc8x?file=src/app/date-range-picker-overview-example.html

But nothing happens, no event is fired when date range is selected. How can I attach the hello() function when user selects a date range?

Answer 1

You need to use dateChange as event binding inside input and make condition into your TS file, I have updated the code please have a look -

https://stackblitz.com/edit/mat-date-range-input?file=src%2Fapp%2Fdate-range-picker-overview-example.html

Answer 2

I solved this with

(dateChange)="onPeriodOfPerfomanceChanged($event)"

Example:

    <div>
      <mat-form-field appearance="fill" color="warn">
        <mat-label>Leistungszeitraum</mat-label>
        <mat-date-range-input
          [rangePicker]="invoicePeriodRangePicker">
          <input matStartDate placeholder="Start date">
          <input (dateChange)="onPeriodOfPerfomanceChanged($event)" matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-datepicker-toggle [for]="invoicePeriodRangePicker" matSuffix></mat-datepicker-toggle>
        <mat-date-range-picker #invoicePeriodRangePicker></mat-date-range-picker>
      </mat-form-field>
    </div>

And TS counterpart

  onPeriodOfPerfomanceChanged($event: any) {
    console.log("Changed......." + $event)
  }