TypeError: Cannot read property 'present' of undefined

Question

I'm trying to call loading/Toast/Alert in Ionic2 in the following scenario. As I'm new to Ionic development, I am not able to figure it out. I am aware it's a silly error.

 var dg = document.getElementById('btnregis');
   dg.onclick =()=> this.presentLoading();


   presentLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading);
    this.Reg_success();
}


    Reg_success() {
console.log("registration success");
        this.Billerlabelview = false;
        let toast = Toast.create({
            message: "Registering...",
            duration: 3000
        });
        this.navController.present(toast);
    }

The reg_Success() method is not getting called. It throws a similar exception. Is there something I'm missing?

Could you please add the rest of the code? That way we can take a look at which are the parameters in the constructor, and so other things that may be causing this issue. — sebaferreras, Jun 23 '16 at 14:44

score 0 · Answer 1 · answered Jun 23 '16 at 12:49

where is the navController used? You can bind db.onclick method with this.

var dg = document.getElementById('btnregis');
 dg.onclick = this.presentLoading.bind(this);



   presentLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading);
}

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

You don't have a this context when just passing the reference to a function.

I'd advise you to use lambdas (or fat arrow function) wherever you're passing functions as parameters. Not only you have your this context from the right class/scope, but it is more readable and consistent.

dg.onclick = () => this.presentLoading();

A really good read on when to use lambdas: https://stackoverflow.com/a/23045200/1961059

edited May 23 '17 at 12:17

Community

1
1

answered Jun 23 '16 at 13:04

rinukkusu

20,045
4
57
66

Could you at least tell us, what exception you get? – rinukkusu Jun 24 '16 at 07:35

score 0 · Answer 3 · answered Jun 24 '16 at 11:32

First, and because your're using the present() method from NavController, make sure you are defining it in your constructor:

class MyClass{
   constructor(navController: NavController) {
      // Ionic docs also recommends to add the next line to make it easier to understand http://ionicframework.com/docs/v2/2.0.0-beta.9/api/components/nav/NavController/#present
      this.navController = navController;
   }    
}

Regarding your question, like you can see in Ionic docs present() returns a promise, so you will have to wait until that gets resolved and then call your Reg_success method:

presentLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading).then(() => {
        this.Reg_success();
    });        
}

Last but not least, you can also change the way you are handling the click event and instead of doing this:

dg.onclick = this.presentLoading.bind(this);

You can do it in the ionic/angular2-way by adding this code in your button:

<button (click)="presentLoading()">Click me!</button>

TypeError: Cannot read property 'present' of undefined

3 Answers3