Impossible to create new instance of Alert

Ionic Framework ionic-v3
1

Hi!

I come here because I don’t understand why the following code doesn’t work :

import {NavController, Alert} from 'ionic-angular';
...
export class MyPage {
    private myAlert = new Alert();
    private confirm = this.myAlert.create({...});
}

I get the following error : Property 'create' does not exist on type 'Alert'
I need to create a new instance of Alert for some reasons. Any idea ?

2

You call Alert.create directly, instead of instantiating and then calling create. See the docs.

3

Hey! I’ve seen that in the doc, but I want to make it with a new instance to be able to call it multiple times. If I proceed how it’s indicate in the documentation, I get an error when I dismiss my alert and call it again. The error is the following :

ORIGINAL EXCEPTION: Attempt to use a destroyed view: detectChanges

I think create a new instance could fix the problem. What do you think about that ?

PS : Thank you for your help

4

If you want to try to reproduce that issue : here is my code.

  private cgv:boolean = false;

  private confirm = Alert.create({
    title: 'Conditions générales',
    message: 'Afin de compléter votre inscription, vous devez accepter les conditions générales d\'utilisation. En cliquant sur le bouton "Accepter", vous reconnaissez avoir pris connaissance de celles-ci.',
    buttons: [
      {
        text: 'Annuler',
        handler: () => {
          let navTransition = this.confirm.dismiss();
          navTransition.then(() => {
            console.log("Alert dissmissed");
          });
        }
      },
      {
        text: 'Accepter',
        handler: () => {
          let navTransition = this.confirm.dismiss();
          this.cgv = true;

          navTransition.then(() => {
            this.navController.pop();
            this.goHome();
          });
        }
      }
    ]
  });

  goHome() {
    if (this.cgv != false) {
      this.navController.setRoot(HomePage);
      this.navController.popToRoot();
    }

    else
      this.navController.present(this.confirm);
  }
5

I don’t believe Alerts can be reused like that.

6

Are you sure ? Here is the code of the alerts in
node_modules/ionic-angular/components/alert.d.ts

export declare class Alert extends ViewController {
    constructor(opts?: AlertOptions);
    /**
    * @private
    */
    getTransitionName(direction: string): any;
    /**
     * @param {string} title Alert title
     */
    setTitle(title: string): void;
    /**
     * @param {string} subTitle Alert subtitle
     */
    setSubTitle(subTitle: string): void;
    /**
     * @private
     */
    private setBody(message);
    /**
     * @param {string} message  Alert message content
     */
    setMessage(message: string): void;
    /**
     * @param {object} input Alert input
     */
    addInput(input: AlertInputOptions): void;
    /**
     * @param {any} button Alert button
     */
    addButton(button: any): void;
    /**
     * @param {string} cssClass CSS class name to add to the alert's outer wrapper
     */
    setCssClass(cssClass: string): void;
    /**
     *
     *  Alert options
     *
     *  | Property              | Type      | Description                                                               |
     *  |-----------------------|-----------|---------------------------------------------------------------------------|
     *  | title                 | `string`  | The string for the alert (optional)                                       |
     *  | subTitle              | `string`  | The subtitle for the alert (optional)                                     |
     *  | message               | `string`  | The message for the alert (optional)                                      |
     *  | cssClass              | `string`  | Any additional class for the alert (optional)                             |
     *  | inputs                | `array`   | An array of inputs for the alert. See input options. (optional)           |
     *  | buttons               | `array`   | An array of buttons for the alert. See buttons options. (optional)        |
     *  | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop (optional)  |
     *
     *
     *  Input options
     *
     *  | Property    | Type      | Description                                                     |
     *  |-------------|-----------|-----------------------------------------------------------------|
     *  | type        | `string`  | The type the input should be, text, tel, number, etc (optional) |
     *  | name        | `string`  | The name for the input (optional)                               |
     *  | placeholder | `string`  | The input's placeholder (optional, for textual/numeric inputs)  |
     *  | value       | `string`  | The input's value (optional)                                    |
     *  | label       | `string`  | The input's label (optional, only for radio/checkbox inputs)    |
     *  | checked     | `boolean` | Whether or not the input is checked or not (optional)           |
     *  | id          | `string`  | The input's id (optional)                                       |
     *
     *  Button options
     *
     *  | Property | Type     | Description                                                    |
     *  |----------|----------|----------------------------------------------------------------|
     *  | text     | `string` | The buttons displayed text                                     |
     *  | handler  | `any`    | Expression that should be evaluated when the button is pressed |
     *  | cssClass | `string` | An additional CSS class for the button                         |
     *  | role     | `string` | The buttons role, null or `cancel`                             |
     *
     * @param {object} opts Alert. See the table above
     */
    static create(opts?: AlertOptions): Alert;
}

If you look at the TypeScript documentation, it should be possible to do that : https://www.typescriptlang.org/docs/handbook/classes.html

7

No, I’m not sure, but a cursory search of the forums turns up this.