Ionic 2 Popup

Ionic Framework ionic-v3
1

Hello,

I have the error below when I try to show an alert popup after click on a button:

EXCEPTION: TypeError: Cannot read property ‘length’ of undefined in [null]
ORIGINAL EXCEPTION: TypeError: Cannot read property ‘length’ of undefined

This is my code:

popups.html:

<ion-content padding class="getting-started">

   <button primary (click)="showAlertPopup()">Alert</button>

</ion-content>

popups.js

import {Page, NavController, Popup} from 'ionic/ionic';

@Page({
  templateUrl: 'app/popups/popups.html'
})

export class PopupsPage {
  constructor(nav: NavController, popup: Popup) {
       this.nav = nav;
       this.popup = popup;
  }
  
  showAlertPopup(){
       this.popup.alert({
           title: 'Ionic Popup',
           template: 'This is alert popup',
       });
  }
}

Thanks in advantage

2

Did you put:

<ion-overlay></ion-overlay>

in your root components template (app.js)?

3

Not sure if it really matters but does removing that comma at the end of:

template: 'This is alert popup',

make any difference?

4

I have that tag in app.html:

<ion-menu [content]="content">
    <ion-toolbar>    
          <ion-title>Pages</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
                   {{p.title}}
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

<ion-overlay></ion-overlay>

Is it not the right place?

5

As you said, no difference :smile:

6

Same here. Anybody have a working example?

7

It´s a bug, you need to update to the latest version of Ionic2 (alpha 37).

1 Like
8

Thank you, it works fine now

1 Like
9

this.popup.alert({
title: ‘Ionic Popup’,
template: ‘This is alert popup’
});

10

is this working in beta version?