title: (Angular2 & Typescript) Angular's DatePicker Cannot read property 'toggle' of undefined
body: <p>I'm unable to click on the calendar icon for angular2's datepicker. It kept giving me this error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'toggle' of undefined
        at Object.eval [as handleEvent] (AdmissionDialogComponent.html:1)
        at handleEvent (core.es5.js?de3d:11997)
        at callWithDebugContext (core.es5.js?de3d:13458)
        at Object.debugHandleEvent [as handleEvent] (core.es5.js?de3d:13046)
        at dispatchEvent (core.es5.js?de3d:8601)
        at eval (core.es5.js?de3d:9212)
        at HTMLButtonElement.eval (platform-browser.es5.js?41b7:2651)
        at ZoneDelegate.invokeTask (zone.js?6524:424)
        at Object.onInvokeTask (core.es5.js?de3d:3881)
        at ZoneDelegate.invokeTask (zone.js?6524:423)</p>
  </blockquote>
  
  <p>Here are my codes for the start date and end date that can't work:</p>
  
  <pre><code>&lt;div class="col-sm-2"&gt;
  
      &lt;div class="input-group"&gt;
          &lt;input id="field_treatmentStartDate" type="text" class="form-control" name="treatmentStartDate" ngbDatepicker #tStartDateDp="ngbDatepicker"
              *ngIf="admission.treatment" [(ngModel)]="admission.treatment.startDate" /&gt;
          &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" (click)="tStartDateDp.toggle()"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div [hidden]="!(editForm.controls.treatmentStartDate?.dirty &amp;&amp; editForm.controls.treatmentStartDate?.invalid)"&gt;
          &lt;small class="form-text text-danger" [hidden]="!editForm.controls.treatmentStartDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal"&gt;
                                          This field should be a date and time.
                                      &lt;/small&gt;
      &lt;/div&gt;
  
      &lt;div [hidden]="!treatmentStartDateIsNull"&gt;
          &lt;small class="form-text text-danger"&gt;
                                          Missing treatment start date.
                                      &lt;/small&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- start date --&gt;
  
  
  
  &lt;div class="col-sm-2"&gt;
  
      &lt;div class="input-group"&gt;
          &lt;input id="field_treatmentEndDate" type="text" class="form-control" name="treatmentEndDate" ngbDatepicker #tEndDateDp="ngbDatepicker"
              *ngIf="admission.treatment" [(ngModel)]="admission.treatment.endDate" (ngModelChange)="admission?.treatment?.endDate  ? admission.treatment.endDate = $event : null"
          /&gt;
  
          &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" (click)="tEndDateDp.toggle()"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div [hidden]="!(editForm.controls.treatmentEndDate?.dirty &amp;&amp; editForm.controls.treatmentEndDate?.invalid)"&gt;
          &lt;small class="form-text text-danger" [hidden]="!editForm.controls.treatmentEndDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal"&gt;
                                          This field should be a date and time.
                                      &lt;/small&gt;
      &lt;/div&gt;
  
      &lt;div [hidden]="!treatmentEndDateIsNull"&gt;
          &lt;small class="form-text text-danger"&gt;
                                          Missing treatment end date.
                                      &lt;/small&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- end date --&gt;
  </code></pre>
  
  <p>However, somewhere within the same form, I do have another set of start and end date, and the calendar popup for those are
  working perfectly fine.</p>
  
  <pre><code>&lt;div class="form-group row"&gt;
      &lt;!-- Start Date --&gt;
      &lt;label class="col-sm-3 form-control-label" jhiTranslate="iconnectSampleAppMonolithApp.admission.startDatetime" for="field_startDate"&gt;Start Date&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;div class="input-group"&gt;
              &lt;input id="field_startDate" type="text" class="form-control" name="startDate" ngbDatepicker #startDateDp="ngbDatepicker"
                  [(ngModel)]="admission.startDate" /&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" (click)="startDateDp.toggle()"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div [hidden]="!(editForm.controls.startDate?.dirty &amp;&amp; editForm.controls.startDate?.invalid)"&gt;
              &lt;small class="form-text text-danger" [hidden]="!editForm.controls.startDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal"&gt;
                                              This field should be a date and time.
                                          &lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
      &lt;!-- End Datetime --&gt;
      &lt;label class="col-sm-3 form-control-label" jhiTranslate="iconnectSampleAppMonolithApp.admission.endDatetime" for="field_endDate"&gt;End Date&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;div class="input-group"&gt;
              &lt;input id="field_endDate" type="text" class="form-control" name="endDate" ngbDatepicker #endDateDp="ngbDatepicker" [(ngModel)]="admission.endDate"
              /&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" (click)="endDateDp.toggle()"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div [hidden]="!(editForm.controls.endDate?.dirty &amp;&amp; editForm.controls.endDate?.invalid)"&gt;
              &lt;small class="form-text text-danger" [hidden]="!editForm.controls.endDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal"&gt;
                                              This field should be a date and time.
                                          &lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the component.ts file, I have initialized blank values to the admission model in "ngOnInit"</p>
  
  <pre><code>this.admission.patient = this.patient;
  this.admission.bed = this.bed;
  this.admission.bed.ward = this.ward;
  this.admission.treatment = this.treatment;
  </code></pre>
  
  <p>So I don't understand why some worked some couldn't work. on ngOnInit function, I have already declared empty attributes to the admission value. When I mean empty, I declared something like </p>
  
  <pre><code>treatment: Treatment = new Treatment();
  </code></pre>