CODEWITHSUNDEEP
javascriptangularionic2
SSS
SSS

Reputation: 713

Ionic-2: Cannot read the property 'open' of undefined

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.

This is how I've tried:

HTML:
   <ion-header>
    <ion-navbar color="primary">
        <ion-title>Alarms</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>

    <ion-card *ngFor="let alarms of serAlarm">
        <ion-card-header>
            {{alarms.id}}
            <ion-toggle value="foo" checked="true"></ion-toggle>
        </ion-card-header>
        <ion-card-content>
            <ion-checkbox (click)="clickRepeat()"></ion-checkbox> Repeat
            <div class="hide">

            </div>
        </ion-card-content>
        <ion-card-content class="top0">
            {{alarms.hour}}:{{alarms.minute}}
        </ion-card-content>
    </ion-card>


    <ion-datetime #dateTime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="dateTimeModel" (ionChange)="onTimeChange()"></ion-datetime> 
    <ion-fab right bottom>
        <button ion-fab color="primary" (click)="opentime()">
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fab>

</ion-content>

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"
        });
    }
}

Here, everything works fine. But, when I click the + button, I get the error Cannot read the property 'open' of undefined. I guess, the problem is in <ion-datetime> line. But, I can't figure what's wrong. Can someone help me with it? What should I change? enter image description here

Upvotes: 0

Views: 1082

Answers (1)

eko
eko

Reputation: 40647

In order to select the element you need to give the correct selector, if you want it to be dateTime then change the element to:

<ion-datetime #dateTime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="dateTimeModel" (ionChange)="onTimeChange()"></ion-datetime>

Note that I've changed the ngModel since they had the same name reference.

Now you can get hold of the element with @ViewChild('dateTime') sTime;

Upvotes: 2

Related Questions