title: How do i trigger an event in angular after a date has been entered in datepicker element
body: <p>I am trying to calculate the hours between a begindate and an enddate and show this to the user in realtime. So if both begindate and enddate have been entered, the hours should be calculated and presented automatically without the user having to press a button or something like this. Right now i'm trying to use the <code>(mouseup)</code> event to trigger the calculation but I get a not defined error when i'm calling getHours method or getDate method on the endDate and startDate variables. This makes sense because the values of these 2 date variables don't have a value yet when the mouseup event is triggered. I could circumvent this problem by assigning a <code>new Date()</code> default object to startDate and endDate but that gives strange output as soon as I press one of the datepickers. The output needs to remain 0 as long as both datepickers haven't been set a value yet. So how do I do this? See my template and component below. The method that is handling the hours calculation is called <code>computeLeave()</code></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {FormBuilder, FormGroup, Validators} from "@angular/forms";
  import {AccountService} from "../../account/account.service";
  
  @Component({
    selector: 'app-leave-create',
    templateUrl: './leave-create.component.html',
    styleUrls: ['./leave-create.component.css'],
    providers: [AccountService]
  })
  export class LeaveCreateComponent{
     title: string;
     leaveCreateForm: FormGroup;
    leaveRemaining: [number, number];
    leaveRemainingTotal: number;
    leaveRequested: [number, number];
    leaveRequestedTotal: number = 0;
    leaveRequestedStatutory: number = 0;
    leaveRequestedNonstatutory: number = 0;
    private leaveHours: [number, number];
  
    leaveStartDate: Date; //= new Date();
    leaveEndDate: Date; //= new Date();
  
    constructor(private readonly fb: FormBuilder,
                private accountService: AccountService) {
      this.title = 'Verlofuren aanvragen';
      this.leaveCreateForm = fb.group({
        startDate: ['', [Validators.required]],
        endDate: ['', [Validators.required]],
      });
      this.leaveHours = [180, 120];
    }
  
    // ngOnInit(): void {
    //   console.log("oninit called")
    //   this.computeLeave();
    // }
  
    // ngOnChanges(): void{
    // console.log("changing")
    //   this.computeLeave();
    // }
  
  
    onSubmit() {
      // console.log(localStorage.getItem('account').toString())
      // this.accountService.grantLeaveHours(this.leaveCreateForm.get('startDate').value, this.leaveCreateForm.get('endDate').value, JSON.parse(localStorage.getItem("account")))
      console.log('%s: startDate=%s, endDate=%s',
        this.constructor.name,
        this.leaveCreateForm.get('startDate').value,
        this.leaveCreateForm.get('endDate').value
      );
    }
  
    // onReset() {
    //   this.leaveCreateForm.reset();
    //   this.computeLeave();
    // }
  
    private computeLeave() {
      console.log("computeLeave called..")
      //console.log("test" + this.leaveCreateForm.get('startDate').value.toString())
      //this.leaveStartDate = new Date(this.leaveCreateForm.get('startDate').value);
      //this.leaveEndDate = new Date(this.leaveCreateForm.get('endDate').value);
      // console.log("Startdate: " + this.leaveStartDate.toString())
      // console.log("EndDate: " + this.leaveEndDate.toString())
      if (this.leaveStartDate === undefined || this.leaveEndDate === undefined) {
        this.leaveRequestedTotal = 0;
        this.leaveRequestedStatutory = 0;
        this.leaveRequestedNonstatutory = 0;
      }
  
      if(this.leaveStartDate.getDate() !== this.leaveEndDate.getDate()) {
        console.log("Startdate: " + this.leaveStartDate.toString())
        console.log("EndDate: " + this.leaveEndDate.toString())
        console.log("not undefined")
        console.log("hour" + this.leaveStartDate.getHours())
        console.log("hour" + this.leaveEndDate.getHours())
        this.leaveRequestedTotal = this.leaveStartDate.getHours() + this.leaveEndDate.getHours();
        this.leaveRequestedStatutory = this.leaveRequestedTotal * 0.8;
        this.leaveRequestedNonstatutory = this.leaveRequestedTotal * 0.2;
      }
      else console.log("undefined")
    }
  }
  </code></pre>
  
  <p>Heres my template</p>
  
  <pre><code>&lt;h2&gt;{{title}}&lt;/h2&gt;
  &lt;form [formGroup]="leaveCreateForm" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-4 form-group"&gt;
          &lt;label for="startDate"&gt;Begin datum&lt;/label&gt;
          &lt;!--&lt;input type="datetime-local" id="startDate" class="form-control"--&gt;
                 &lt;!--placeholder="01-01-2017" [(ngModel)]="leaveStartDate" formControlName="startDate"--&gt;
                 &lt;!--(mouseup)="computeLeave()"&gt;--&gt;
          &lt;input type="date" id="startDate" name="startDate" class="form-control"
                 placeholder="01-01-2017" [(ngModel)]="leaveStartDate" formControlName="startDate" (focus)="computeLeave()"&gt;
        &lt;/div&gt;
      &lt;div class="col-sm-4 form-group"&gt;
        &lt;label class="form-check-label"&gt;
          &lt;input #intraDay class="form-check-input" type="checkbox" (change)="0"&gt;
          Verlof duurt minder dan 1 dag
        &lt;/label&gt;
        &lt;input *ngIf= "intraDay.checked" type="text" class="form-control" placeholder="voer het aantal uren in" formControlName="intraDayHours"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
    &lt;div class="col-sm-4 form-group"&gt;
      &lt;label *ngIf= "!intraDay.checked" for="endDate"&gt;Eind datum&lt;/label&gt;
      &lt;input *ngIf= "!intraDay.checked" type="date" id="endDate" name="endDate" class="form-control"
             placeholder="02-02-2017" [(ngModel)]="leaveEndDate" formControlName="endDate" (mouseup)="computeLeave()"&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;table class="table"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Berekend&lt;/th&gt;
          &lt;th&gt;Beschikbaar&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Wettelijk&lt;/td&gt;
          &lt;td&gt;{{leaveRequestedStatutory | number:"1.0-0"}}&lt;/td&gt;
          &lt;!--&lt;td&gt;{{leaveRemaining[0] | number:"1.0-0"}}&lt;/td&gt;--&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Bovenwettelijk&lt;/td&gt;
          &lt;td&gt;{{leaveRequestedNonstatutory | number:"1.0-0"}}&lt;/td&gt;
          &lt;!--&lt;td&gt;{{leaveRemaining[1] | number:"1.0-0"}}&lt;/td&gt;--&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Totaal&lt;/td&gt;
          &lt;td&gt;{{leaveRequestedTotal | number:"1.0-0"}}&lt;/td&gt;
          &lt;!--&lt;td&gt;{{leaveRemainingTotal | number:"1.0-0"}}&lt;/td&gt;--&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Aanvragen&lt;/button&gt;
      &lt;button type="button" class="btn btn-default" (click)="onReset()"&gt;Reset&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  ERROR TypeError: this.leaveStartDate.getDate is not a function
      at LeaveCreateComponent.webpackJsonp.../../../../../src/app/app/leave/create/leave-create.component.ts.LeaveCreateComponent.computeLeave (leave-create.component.ts:74)
      at Object.eval [as handleEvent] (LeaveCreateComponent.html:24)
      at handleEvent (core.es5.js:11998)
      at callWithDebugContext (core.es5.js:13467)
      at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
      at dispatchEvent (core.es5.js:8614)
      at core.es5.js:10770
      at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
      at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
      at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
  </code></pre>