CODEWITHSUNDEEP
ionic-frameworkmobile-applicationionic-nativeionic4
Simon
Simon

Reputation: 159

Ionic 4 - AlertController: Property 'present' does not exist - Angular?

I'm setting up a new alert in Ionic 4 - blank type:angular project. It's basic alert but I get an error occured running of my project.

Error

Property 'present' does not exist on type 'Promise'. Did you forget to use 'await'?

My create the same code as in documentation. Links:https://ionicframework.com/docs/api/components/alert/AlertController/

My code:

import { AuthenticationService } from './../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { AlertController, LoadingController, NavController } from 
'@ionic/angular';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
  createSuccess = false;
  registerCredentials = { email: '', password: '' };

 constructor(
   private nav: NavController,
   private auth: AuthenticationService,
   private alertCtrl: AlertController) { }

 ngOnInit() {
 }

 presentAlert() {
    const alert = this.alertCtrl.create({
    message: 'Low battery',
    subHeader: '10% of battery remaining',
    buttons: ['Dismiss']
   });
   alert.present(); <--- error Property 'present' does not exist on type 'Promise<HTMLIonAlertElement>'. Did you forget to use 'await'?
}
public register() {
this.auth.register(this.registerCredentials).subscribe(success => {
  if (success) {
    this.createSuccess = true;
    this.showPopup('Success', 'Account created.');
  } else {
    this.showPopup('Error', 'Problem creating account.');
  }
},
  error => {
    this.showPopup('Error', error);
  });
}

showPopup function that shoulbe be working..

showPopup(title, text) {
let alert = this.alertCtrl.create({
  message: title,
  subHeader: text,
  buttons: [
    {
      text: 'OK'
    }
  ]
});
alert.present(); <-- the same error
}

Upvotes: 13

Views: 32175

Answers (4)

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3738

I have resolved with this solution ..

Write alert.present() like this (await alert).present()

async presentAlert() {
    let alert = this.alertCtrl.create({
      subHeader: 'Low battery',
      message: 'This is an alert message.',
      buttons: ['Dismiss']
    });
    (await alert).present();
  }

Upvotes: 3

RohitAneja
RohitAneja

Reputation: 1011

You have to use async and await. Here is a code sample:

 async showAlert () {
  const alert = await this.alertCtrl.create({
    header: 'Alert',
    subHeader: 'Subtitle',
    message: 'This is an alert message.',
    buttons: ['okay']
  });
  await alert.present();
};

Upvotes: 1

Sourabh Chopade
Sourabh Chopade

Reputation: 543

Since create method of alert controller return promise that's why you can not use present method directly. What you need to do is "use then" and call present method like below-

presentAlert() {
  const alert = this.alertCtrl.create({
  message: 'Low battery',
  subHeader: '10% of battery remaining',
  buttons: ['Dismiss']}).then(alert=> alert.present());
}

Hope it will helpful :).

Upvotes: 9

Suraj Rao
Suraj Rao

Reputation: 29635

The documentation you are using refers to ionic 3 As you are using Ionic 4, you need to refer to the current Ionic 4 docs and this.

this.alertController.create({...})

returns promise of the object as the error specifies.

Your code needs to be:

 async presentAlert() {
    const alert = await this.alertCtrl.create({
    message: 'Low battery',
    subHeader: '10% of battery remaining',
    buttons: ['Dismiss']
   });
   await alert.present(); 
}

Upvotes: 20

Related Questions