title: Angular material DatepickerRange get value on change
body: <p>I have
  DatePickerRange of Angular Material and I want to run a function when changing the value in DatePicker I tried with the function (change) but it did not work I would be happy for your help how to do it.
  Thank you!</p>
  <p>This is my html:</p>
  <pre><code>&lt;mat-form-field class=&quot;form-field&quot;&gt;
      &lt;mat-label&gt;Enter a date range&lt;/mat-label&gt;
      &lt;mat-date-range-input [formGroup]=&quot;range&quot; [rangePicker]=&quot;picker&quot;&gt;
          &lt;input matStartDate formControlName=&quot;start&quot; placeholder=&quot;Start date&quot;&gt;
          &lt;input matEndDate formControlName=&quot;end&quot; placeholder=&quot;End date&quot;&gt;
      &lt;/mat-date-range-input&gt;
      &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-date-range-picker #picker&gt;&lt;/mat-date-range-picker&gt;
  
      &lt;mat-error *ngIf=&quot;range.controls.start.hasError('matStartDateInvalid')&quot;&gt;Invalid start date
      &lt;/mat-error&gt;
      &lt;mat-error *ngIf=&quot;range.controls.end.hasError('matEndDateInvalid')&quot;&gt;Invalid end date
  
      &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  <p>And that's the function I want to activate:</p>
  <pre><code>   @Output() newItemEvent = new EventEmitter&lt;bookedDate&gt;();
        addNewDate() {
          this.dateRange.dateStart = this.range.get('start').value;
          this.dateRange.dateEnd = this.range.get('end').value;
          this.newItemEvent.emit(this.dateRange);
        }
  </code></pre>