Error Opening an Alert From Within a Modal

Ionic Framework ionic-v3
1

Hi,

Sorry if this is a newbie question, but is it possible to pop up an Alert from within a Modal? (And if so, how?)

Modals receive a ViewController, not a NavController, and the former doesn’t seem to offer a present() method…

I’ve tried passing the “parent” NavController as a NavParam, then ‘present’-ing on that, but it doesn’t seem to have the desired effect. (My naïve guess is that it’s coming up UNDER the Modal, so I can’t see it to tap/click Close.)

Below is a my pages/home/home.ts, which you should be able to drop right into a fresh ionic start FooApp blank --v2 template:

import {Component} from '@angular/core';
import {Modal, ViewController, NavController, NavParams, Alert} from 'ionic-angular';

@Component({
  template: `
    <ion-content padding>
      <ion-list>
        <ion-item>{{ person.firstname }}</ion-item>
        <ion-item>{{ person.lastname }}</ion-item>
      </ion-list>
      <button (click)="openEditor()" style="width: 100%;">Edit</button>
    </ion-content>`
})
export class HomePage {
  public person: any;

  constructor(private nav: NavController) {
    this.person = { firstname: "Andy", lastname: "Adams" };
  }

  public openEditor() {
    let editModal = Modal.create(Editor, {
         homePage: this,
        firstname: this.person.firstname,
         lastname: this.person.lastname });
    editModal.onDismiss((data) => { if (data) { this.person = data }});
    this.nav.present(editModal);
  }
}

@Component({
  template: `
    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-label>First Name</ion-label>
          <ion-input type="text" [(ngModel)]="person.firstname"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Last Name</ion-label>
          <ion-input type="text" [(ngModel)]="person.lastname"></ion-input>
        </ion-item>
      </ion-list>
      <button (click)="cancel()">Cancel</button>
      <button (click)="save()">Save</button>
    </ion-content>`
})
class Editor {
  public person: any;

  constructor(private view: ViewController, private navParams: NavParams) {
    this.person = { firstname: navParams.get('firstname'),
                     lastname: navParams.get('lastname') };
  }

  public cancel() {
    var alert = Alert.create({
      title: "Are You Sure?",
      subTitle: "Are you sure you want to cancel?",
      buttons: [{ text: "No" },
                { text: "Yes",
                  handler: () => {
                      let navTransition = alert.dismiss();
                      navTransition.then(() => { this.view.dismiss() });
                      return false;
                  }}]});

    /* Error TS2339: Property 'present' does not exist on type 'ViewController'. */
    // this.view.present(alert);

    /* Opens the alert *BEHIND* the current Modal :-( */
    this.navParams.get('homePage').nav.present(alert);
  }

  public save() {
    var alert = Alert.create({
      title: "Contact Updated",
      subTitle: this.person.firstname + " " + this.person.lastname,
      buttons: [{ text: "Close",
                  handler: () => {
                      let navTransition = alert.dismiss();
                      navTransition.then(() => { this.view.dismiss(this.person) });
                      return false;
                  }}]});

    /* HACK! Dismiss the Modal to reveal the hidden Alert */
    this.navParams.get('homePage').nav.present(alert).then(() => { this.view.dismiss() });
  }
}

Any insight would be greatly appreciated… Thanks! :smiley:

2

Hi, have you tried to do simple:
alert.present()

if yes whats the output?

3

import ‘AlertController’ and use constructor instance of alertController to create Alert. And use the alert.present(); to show alert.

import {AlertController} from ‘ionic-angular’;

in constructor

  constructor(private alertCtrl: AlertController) { }

  ...
  ...

  var alert = this.alertCtrl.create({
      ....
      ....
  });
  alert.present();
4

Oh sure… Wait until [weeks] after Beta 11 comes out to make me look like an idiot! «wink!»

But seriously, I do appreciate the response. :smiley:

Unfortunately, I had already managed to “solve” my particular problem by switching to React Native, instead. But I’ll definitely take another look at Ionic 2 for a future project.

Cheers!