How to get and show data in ionic?

Question

I'm new to ionic and having a hard time to get data from alert inputs and showing them to another page. I'm making a button that shows alert, then you can input the time (I don't know how to use datetime in ionic) and a randomizes of number. Then showing all inputs to another page.

HTML

 <ion-content padding>
 <ion-grid>
  <button ion-button id="id" (click)="sample;" [disabled]="disabled">1</button>
 </ion-grid>
</ion-content>

TS

Ground1(bname:string){

let alert = this.alertCtrl.create({
title: 'Confirm Park',
message: 'Do you want to park this slot?',
inputs: [
  {
    name: 'Time',
    placeholder: 'Input Time', 

  },
  {
    name: 'Code',
    placeholder: 'Random Number'
  },
  {
    name: 'Date',
    placeholder: 'MM/DD/YY'
  }
],

buttons: [
  {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
      console.log('Cancel clicked');

    }
  },
  { 
     text: 'Confirm',
    handler: data => {
             this.buttonColor1 = 'red'
      console.log('Confirm clicked');
      this.disabled = true;
      console.log(JSON.stringify(data));


      this.navCtrl.push(ResultPage, {result:name}, alert);
    }
  }
]
});
alert.present();

Answer 1

You can get the data from the fields in the confirm handler. You should be able to just pass the data variable to the next page, which should include data.Time, data.Code and data.Date.

  this.navCtrl.push(ResultPage, {result: data});

On your ResultPage you can just use navParams ( http://ionicframework.com/docs/api/navigation/NavParams/ ) to retrieve the result data that you passed.

result = this.navParams.get('result');

Answer 2

Alerts can also include Radios, checkboxes and text inputs , but they cannot be mixed. In addition, you can not use datetime picker in it.

Do note however, different types of "text"" inputs can be mixed, such as url, email, text, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert.

If you want to use different inputs such as datetime or html inputs it is recommended that you must create the form within a modal instead.

datetime.html

<ion-header>
  <ion-navbar>
    <ion-title>DateTime</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-item>
      <ion-label>Full Date</ion-label>
      <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2100" [(ngModel)]="myFullDAte"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label>Time</ion-label>
      <ion-datetime displayFormat="hh:mm A" [(ngModel)]="myTime"></ion-datetime>
    </ion-item>

  </ion-list>

</ion-content>

ts file

import { ModalController, NavParams } from 'ionic-angular';

@Component(...)
class MyPage {

 constructor(public modalCtrl: ModalController) { }

 presentModal() {
   let myModal = this.modalCtrl.create(Datetime);
   profileModal.present();
 }

}