Ionic Creating Pages

As discussed on our previous lecture, an Ionic page is simply a collection of JavaScript, HTML, and an optional CSS file. We can manually create an Ionic page by creating a new folder and adding these 3 web files.

But to make it easier and faster, we will rely on the power of the Ionic Command Line Interface to generate a new page component for us. So first, let’s open an Ionic project and then, open the terminal.

Let’s run our app and see the list of pages it currently has. So just type ionic serve…

And here, you can see that we only have the HOME and LIST pages.

For this lecture, we will create a new ABOUT page in this menu. Alright, let’s go back to our IDE.

To automatically generate an Ionic Page, just issue this command:

ionic generate page <and the name of your new Page> 

Let us now create a new ABOUT page for our app. Simply type: ionic generate page About.

After that, go to the Pages folder and check out your brand new pages. As you can see, our Ionic CLI had successfully created the JavaScript, HTML and SCSS preprocessor file.

We may have the new Ionic Page but it is still disconnected from our main application routing. To fix that, just go to the app.module.ts and import the new page.

import { About } from ‘../pages/about/about’;

Next, let’s add the About page under the declarations and entryComponents array in our main NgModule. This will connect our new page to the rest of our Ionic application.

Lastly, we will add the new page in the list of the menu. To do that, just go to app component and import the About page. Afterwards, include it to the list of our page.

And that’s a wrap! This is how you add a new page in your app.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.