title: Ionic-2: Cannot read the property 'open' of undefined
body: <p>I'm creating an ionic-2 project, where I've a button at the right bottom. My concept is, when I click the button, the time picker should open. I've to select my time and click done.</p>
  
  <p>This is how I've tried:</p>
  
  <pre><code>HTML:
     &lt;ion-header&gt;
      &lt;ion-navbar color="primary"&gt;
          &lt;ion-title&gt;Alarms&lt;/ion-title&gt;
      &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
  
      &lt;ion-card *ngFor="let alarms of serAlarm"&gt;
          &lt;ion-card-header&gt;
              {{alarms.id}}
              &lt;ion-toggle value="foo" checked="true"&gt;&lt;/ion-toggle&gt;
          &lt;/ion-card-header&gt;
          &lt;ion-card-content&gt;
              &lt;ion-checkbox (click)="clickRepeat()"&gt;&lt;/ion-checkbox&gt; Repeat
              &lt;div class="hide"&gt;
  
              &lt;/div&gt;
          &lt;/ion-card-content&gt;
          &lt;ion-card-content class="top0"&gt;
              {{alarms.hour}}:{{alarms.minute}}
          &lt;/ion-card-content&gt;
      &lt;/ion-card&gt;
  
  
      &lt;ion-datetime #dateTime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="dateTimeModel" (ionChange)="onTimeChange()"&gt;&lt;/ion-datetime&gt; 
      &lt;ion-fab right bottom&gt;
          &lt;button ion-fab color="primary" (click)="opentime()"&gt;
              &lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;
          &lt;/button&gt;
      &lt;/ion-fab&gt;
  
  &lt;/ion-content&gt;
  
  TS:
  import { Component, ViewChild } from '@angular/core';
  import { NavController} from 'ionic-angular';
  
  
  @Component({
      selector: 'page-alarm',
      templateUrl: 'alarm.html'
  })
  export class AlarmPage {
      time: string = '00:00';
      serAlarm = [];
  
      constructor(public navCtrl: NavController) { }
  
      @ViewChild('dateTime') sTime;
  
       opentime(){
           this.sTime.open();
       }
  
      onTimeChange() {
          var res = this.time.toString().split(":"); 
          this.serAlarm.push({
              id: "0",
              description: "",
              hour: res[0],
              minute: res[1],
              repeat: "0",
              action: "0",
              active: "1"
          });
      }
  }
  </code></pre>
  
  <p>Here, everything works fine. But, when I click the <code>+</code> button, I get the error <code>Cannot read the property 'open' of undefined</code>. I guess, the problem is in <code>&lt;ion-datetime&gt;</code> line. But, I can't figure what's wrong. Can someone help me with it? What should I change?
  <a href="https://i.stack.imgur.com/dIPeD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dIPeD.png" alt="enter image description here"></a></p>