How to do it...

Here are the instructions:

  1. Create a new Navigation app using the blank template, as shown, and go into the Navigation folder:
$ ionic start Navigation blank
$ cd Navigation
  1. Edit ./src/app/app.module.ts with the following code:
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { OtherPage } from '../pages/otherPage/otherPage';

@NgModule({
declarations: [
MyApp,
HomePage,
OtherPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
OtherPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
The main reason you have to modify this file is to declare OtherPage as a dynamically loaded module via NgModule. You will have to declare OtherPage again in the home.ts file.
  1. Edit ./src/app/pages/home/home.html:
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
<ion-card-header>
NavPush 1
</ion-card-header>
<ion-card-content>
<p>Use both <code>navPush</code> and
<code>navParams</code></p>
<button ion-button block [navPush]="otherPage"
[navParams]="myString">
OtherPage 1
</button>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
NavPush 2
</ion-card-header>
<ion-card-content>
<p>Use only <code>navPush</code> and pass an array instead</p>
<ion-list>
<ion-item>
<ion-label floating>Name</ion-label>
Adding Ionic 2 Components 58
<ion-input type="text" [(ngModel)]="myJSON.text"></ion-
input>
</ion-item>
</ion-list>
<div>
<button ion-button block color="secondary"
[navPush]="otherPage"
[navParams]="myJSON">OtherPage 2</button>
</div>
</ion-card-content>
</ion-card>

<ion-card>
<ion-card-header>
NavPush 3
</ion-card-header>
<ion-card-content>
<p>Use click event to trigger <code>nav.push</code> in
Javascript </p>
<button ion-button block color="dark"
(click)="gotoOtherPage()">OtherPage 3</button>
</ion-card-content>
</ion-card>
</ion-content>
  1. Edit ./src/app/pages/home/home.ts with the following code:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OtherPage } from '../otherPage/otherPage';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public myString: string = 'Example 1 - This is just a string';
public myJSON: any = {text: ''};
otherPage: any = OtherPage;
constructor(public navCtrl: NavController) {

}

gotoOtherPage() {
this.navCtrl.push(OtherPage, {text: 'Example 3 - This is an object'});
}

}
  1. Create the ./src/app/pages/otherPage folder
  2. Create the otherPage.html file in the previously created otherPage folder:
<ion-header>
<ion-navbar>
<ion-title>Other</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-card *ngIf="navParams.data">
<ion-card-header>
navParams.data
</ion-card-header>
<ion-card-content>
{{ navParams.data | json }}
</ion-card-content>
</ion-card>

<button ion-button block (click)="goBack()">
goBack()
</button>

<button ion-button block navPop>
nav-pop
</button>
</ion-content>
  1. In the same folder, add otherPage.ts as well, with the following code:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
selector: 'page-other',
templateUrl: 'otherPage.html',
})
export class OtherPage {

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad OtherPage');
}
goBack() {
this.navCtrl.pop();
}
}
  1. Go to your Terminal and run the app:
$ ionic serve
You can also generate new pages using Ionic CLI's generate commands. For example, to generate a new page you can use the following ionic command: ionic generate page pageName. Here, pageName is the name of the new page.
You can not only generate pages but components, pipes, and many other things. Take a look at https://ionicframework.com/docs/cli/generate/.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.135.80