Ionic 2/Ionic 3 - Create ,Generate and Add Pages -- Words (690)

Ionic
Ionic 2/3 create and add pages

In the previous tutorial we looked at how to create an Ionic 2 / Ionic 3 project .Now we'll continue with the previous project by adding pages which are the basic buildings of an Ionic app .So lets get started .

You can create pages either manually or generating them using the Ionic CLI which is the recommended method .

In this guide we'll look first at how to create a page manually or generate it with the Ionic CLI ,then how to add it to the project .

Go ahead and open your terminal or command prompt and follow the instructions :

Generating pages using the Ionic CLI


You can generate a new page by running

ionic g page <pageName> 

For example to generate a contact page :

ionic g page contact 

This command will create a folder with name my-page and three files

.
├── contact.html 
├── contact.scss
└── contact.ts

contact.html : contains html components for page .

contact.scss : contains sass styles to style your page.

contact.ts : contains TypeScript code .

In case of Ionic 3 ,pages are generated with lazy loading by default which means a page has its own module

.
├── contact.html
├── contact.module.ts
├── contact.scss
└── contact.ts

Create pages manually


Head over to your project src/pages then create a folder with your page name or any name you choose . Then create three files : contact.html , contact.scss and contact.ts

Open contact.ts and add the following code

import { Component } from [email protected]/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
selector: 'contact',
templateUrl: 'contact.html',
})
export class ContactPage {

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

}

We first import Component decorator from @angular/core then import NavController, NavParams from ionic-angular which are used for adding navigation between pages inside an Ionic app .

Then we create a TypeScript class with a constructor then decorated this page with @Component decorator

In the decorator parameter templateUrl we specify the name of the html file associated with the page .

On the class constructor we inject both NavController and NavParams which gives us two instances this.navCtrl and this.navParams tha can be used for implementing navigation between pages .

The @Component decorator is an Angular class that converts and normal class to a component .

An Ionic page is just an Angular component .
We can actually create the page without injecting NavController and NavParams but since these two classes are used frequently then you may need to inject them

Adding a page to page module ( Ionic 3 only )


If you want to lazy load the page you need also to add a page module file .So go ahead create contact.module.ts

then copy and paste this code

import { NgModule } from [email protected]/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';

@NgModule({
declarations: [
    ContactPage,
],
imports: [
    IonicPageModule.forChild(ContactPage),
],
exports: [
    ContactPage
]
})
export class ContactPageModule {}

Adding pages to project main module


if the page supports lazy loading then it already has its own module so there is no need to add it to the project main module .If it's not then head over to src/app/app.module.ts then import and add the page to the lists : entryComponents and declarations

/* ... */
import { ContactPage } from '../pages/contact/contact';

@NgModule({
declarations: [
    MyApp,
    ContactPage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    ContactPage
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Conclusion


So we have seen different methods to create pages in Ionic 2 and 3 ,we also covered how to add a page to main module app or page module is lazy loading is supported (Only in Ionic 3).




mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.