IONIC

Routing in ionic application

Whenever we create a page we have to register the pages in app.module.ts

@NgModule({

  declarations: [

    MyApp,

    HomePage,

    ShopPage,

    BuyoutPage

  ],

  imports: [

    IonicModule.forRoot(MyApp)

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage,

    ShopPage,

    BuyoutPage

  ],

  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]

})

<button ion-button (click)="onGoToShop()">Go to Shop</button>

export class HomePage {

 constructor(public navCtrl: NavController) {  }

 onGoToShop() {  

this.navCtrl.push(ShopPage);

}      

}

How to I pass data from one page to another ??

·         Assume you have 2 pages shop and buyout

·         I’ve gotto pass data from shop to buyout page.

In shop.html

<ion-content padding>

  <button ion-button (click)="onBuy({name: 'Milk', quantity: 2})">Milk</button>

  <button ion-button (click)="onBuy({name: 'Bread', quantity: 1})">Bread</button>

  <button ion-button (click)="onBuy({name: 'Apples', quantity: 10})">Apples</button>

</ion-content>

In Shop.ts

@Component({

  selector: 'page-shop',

  templateUrl: 'shop.html'

})

export class ShopPage {

  constructor (private navCtrl: NavController) {}

  onBuy(productData: {name: string, quantity: number}) {

    this.navCtrl.push(BuyoutPage, productData);

  }

}

In the receiving page here buyout.ts

export class BuyoutPage {

  productData: {name: string, quantity: number}; // you have to declare the same js object in order to receive

  constructor (private navParams: NavParams, private navCtrl: NavController) {

    this.productData = this.navParams.data;

  }

 onConfirmPurchase() {

    this.navCtrl.popToRoot(); // this would send to the root page

  }

}

In the buyout.ts

<ion-content padding>

  <h2>Your Order</h2>

  <p>Name: {{ productData.name }}</p>

  <p>Quantity: {{ productData.quantity }}</p>

  <button ion-button (click)="onConfirmPurchase()">Buy</button>

</ion-content>