Trouble with Ionic 2 Modal

Ionic Framework ionic-v3
1

Hi,

For a prototype app I am building, I would like a login form to appear in a modal.

I am struggling with getting a modal to work in Ionic 2 (which I am new to). I created an app with the sidemenu template using current version (ionic@2.0.0-beta.32) of ionic-cli. I have followed the documentation but to no avail. Not sure what I am doing wrong. Any help much appreciated.

Code is below for app.ts:

import { Component, ViewChild } from '@angular/core';
import { App, ionicBootstrap, Platform, Nav, Modal, NavController, ViewController } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { Page1 } from './pages/page1/page1';
import { Page2 } from './pages/page2/page2';
import { About } from './pages/about/about';
import { Order } from './pages/order/order';

@Component({
  templateUrl: 'build/app.html'
})

class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Order;

  pages: Array<{title: string, component: any}>

  constructor(private platform: Platform) {
    this.initializeApp();

    this.pages = [
      { title: 'Page1', component: Page1 },
      { title: 'Page2', component: Page2 },
      { title: 'About', component: About },
      { title: 'Order', component: Order }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }
}

@Component({
  template: `
  <ion-content padding>
    <h2>Login modal</h2>
    <button (click)="close()">Close</button>
  </ion-content>`
})

class MyModal {
  constructor(
    private viewCtrl: ViewController) {}

  close() {
    this.viewCtrl.dismiss();
  }
}

class MyPage {
  constructor(
    private nav: NavController) {}

  showModal() {
    let modal = Modal.create(MyModal);
    this.nav.present(modal);
  }
}

ionicBootstrap(MyApp);

And I am trying to open the modal with a button:

<button primary (click)="showModal()">Login</button>