import { Component , NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AlertController , IonicApp , IonicModule , LoadingController , NavController } from '../../../..' ; import { FormBuilder , Validators } from '@angular/forms' ; @ Component ( { templateUrl : 'main.html' } ) export class E2EPage { constructor ( public alertCtrl , public navCtrl ) { } ionViewDidEnter ( ) { let alert = this . alertCtrl . create ( { title : 'Alert!' , message : 'I was opened in ionViewDidEnter' , buttons : [ 'Ok' ] } ) ; alert . present ( ) ; } submit ( ) { var alert = this . alertCtrl . create ( { title : 'Not logged in' , message : 'Sign in to continue.' , buttons : [ { text : 'Sign in' , handler : ( ) => { console . log ( 'Sign in' ) ; } } ] } ) ; alert . onDidDismiss ( ( ) => { console . log ( 'dismiss' ) ; this . navCtrl . push ( AnotherPage ) ; } ) ; alert . present ( ) ; } } @ Component ( { template : `
    <ion-header>
      <ion-navbar>
        <ion-title>Another Page</ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content padding>
      <form [formGroup]="form" (ngSubmit)="submit(form.value)">
        <ion-list>
          <ion-item>
            <ion-label>Name</ion-label>
            <ion-input name="firstName" type="text"></ion-input>
          </ion-item>
        </ion-list>
        <div padding style="padding-top: 0 !important;">
          <button ion-button list-item color="primary" block>
            Submit
          </button>
        </div>
      </form>
      <p>
        <button ion-button block (click)="doFastPop()">Fast Loading Dismiss, Nav Pop</button>
      </p>
    </ion-content>
  ` } ) export class AnotherPage { form : any ; constructor ( public navCtrl , public alertCtrl , public loadingCtrl , public builder ) { this . form = builder . group ( { firstName : builder . control ( '' , Validators . compose ( [ Validators . required , Validators . minLength ( 5 ) ] ) ) } ) ; } submit ( value ) { if ( this . form . valid ) { console . log ( value ) ; } else { this . alertCtrl . create ( { title : 'Invalid input data' , subTitle : 'Please correct the errors and resubmit the data.' , buttons : [ 'OK' ] } ) . present ( ) ; } } ionViewDidEnter ( ) { this . showConfirm ( ) ; } showConfirm ( ) { const alert = this . alertCtrl . create ( { title : `Hi there` , buttons : [ { text : 'Go Back' , role : 'cancel' , handler : ( ) => { alert . dismiss ( ) . then ( ( ) => { this . navCtrl . pop ( ) ; } ) ; return false ; } } , { text : 'Stay Here' , handler : ( ) => { console . log ( 'Stay Here' ) ; } } ] } ) ; alert . present ( ) ; } doFastPop ( ) { let alert = this . alertCtrl . create ( { title : 'Async Nav Transition' , message : 'This is an example of dismissing an alert, then quickly starting another transition on the same nav controller.' , buttons : [ { text : 'Ok' , handler : ( ) => { let loading = this . loadingCtrl . create ( { content : 'Loading...' } ) ; loading . present ( ) ; setTimeout ( ( ) => { loading . dismiss ( ) ; alert . dismiss ( ) . then ( ( ) => { this . navCtrl . pop ( ) ; } ) ; } , 100 ) ; return false ; } } ] } ) ; alert . present ( ) ; } } @ Component ( { template : '<ion-nav [root]="root"></ion-nav>' } ) export class AppComponent { root = E2EPage ; } @ NgModule ( { declarations : [ AppComponent , E2EPage , AnotherPage ] , imports : [ BrowserModule , IonicModule . forRoot ( AppComponent ) ] , bootstrap : [ IonicApp ] , entryComponents : [ E2EPage , AnotherPage ] } ) export class AppModule { }