Ionic From Scratch: Editing Your Ionic Project

In this post we'll take a look at Ionic pages. I'll show you how to edit content inside your app as well as how to create additional app pages and set up navigation.

Editing Page Content

In Getting Started With Ionic, we learned how to create our very first Ionic project. Carrying on from there, in this tutorial, we are going to edit one of the pages we created for our app.

In order to edit our page, we need to open up our project using a text editor tool. In my case, I'll be using Visual Studio Code, but please feel free to use your own preferred text editor. Once you have your project opened, it should look similar to the image below (note we open the entire project folder and not just a specific page):

ionic project file opened in visual studio code

Ionic uses page files that contain all the necessary files you will need to make changes to any given page in your application. These pages can be found in a folder under the src folder in your Ionic project.

We are going to be making a simple change in our Ionic app, by editing the home page. In order to do so, navigate to the home.html file in src/pages/home and make the following changes to the file:

<ion-header>
  <ion-navbar>
    <ion-title>My Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to My Ionic App!</h2>
  <p>
    This is super awesome.
  </p>
  <p>
    This is my 1st Ionic app ever.
  </p>
</ion-content>

With that done, navigate to the home.scss file, also in src/pages/home, and make the following changes:

page-home {

    ion-content {
        background: black !important;
    }

    h2 {
        color: white;
    }

    p {
        color: white;
    }

}

Here, we changed the background color of the home page from white to black by targeting ion-content. This is where our page content exists. In addition, we also targeted the h2 header element as well as the p (paragraph) elements and changed the color of the text for both to white.

With your changes complete (don't forget to save), run either ionic serve or ionic lab from the command line. These Ionic CLI tools will compile your app and make it available for testing. I'll be using ionic lab in this example.

Once you've successfully run either of these commands, your local development server should spin up your application, and it should look something like this:

Ionic Page Structures

So, we've edited the home page by changing the text as well as the background color of the page. How did we go about doing this? Our home page folder consists of three files: home.html, home.scss, and home.ts.

The home.ts file is a TypeScript file that consists of an Angular component with the following component decorator:

1	@Component({
2	selector: 'page-home',
3	templateUrl: 'home.html'
4	})

The home.html file acts as the component's template, which we can use to make changes to our home page content. It is specified with the templateUrl parameter to the component decorator.

To change the style of the home page, we can use CSS or SCSS in the home.scss file.

Creating Additional Pages

Next, we are going to be creating an additional page in our application called info. In order to create this new page, we need to run the following command in our project: ionic generate page info. In Visual Studio Code, we can do so by opening up the integrated terminal from View > Integrated Terminal. Simply type the command there and press Enter.

This will generate a new page in your project, with the files info.html, info.ts, and info.scss.

integrated terminal in visual studio code

After the page is successfully generated, you should be able to see it under the pages folder in your project files. In order for us to be able to use this newly created page within our application, we will need to first register it in our app.module.ts file. You can find this in the src/app folder.

First, add an import statement for your info page's component file near the top of app.module.ts.

1	import { InfoPage } from '../pages/info/info';

You can add this in below the import statements for the other pages.

Then, add InfoPage to the declarations and entryComponents arrays of your app module. Your @NgModule declaration should now look like the following:

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    InfoPage
  ],

//...

  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    InfoPage
  ],
  
//...

Navigation in Ionic

In its simplest form, Ionic pushes and pops pages as its navigation concept. The idea is that we are stacking pages on top of one another—when we open a new page, we push it onto the stack, and when we go back to the previous page, we pop the current page off.

So when you are viewing a page in an Ionic application, you are always viewing the topmost page on the stack, and if you click to view a different page, you will be pushing this page on top of the navigation stack covering the previous page in the view.

If you were to go back to the previous page, you will then be popping the current page off the stack and viewing the page below it. Think of it as a deck of cards, where you are adding and removing cards from the deck.

Add a Navigation Button

Carrying on with our example, with our page successfully created and registered within our application, let's set up navigation to our newly created page from the home page.

Using the home page we edited earlier, let's further customize it by adding a button that will allow us to navigate to our info page. Add the following code to home.html, inside ion-content and below the paragraph text:

1	<button ion-button>Navigate to Info</button>

The code above specifies an Ionic component, namely an ion-button. Later we'll add a click handler so when this button is pressed, we will navigate to the info page.

Your home page should look similar to this now:

ionic serve command reflecting page changes

However, if we were to click on our newly created button now, it wouldn't take us anywhere as we haven't programmed it yet with any functionality. In order to do so, we'll need to add a click listener event followed by a function onto our button as follows:

1	<button ion-button (click)="navigateToInfo()">Navigate to Info</button>

Next, let's go ahead and declare the function we wrote above, navigateToInfo(), in our home.ts file. First, import the NavController helper from the ionic-angular core library. NavController allows us to manage navigation in our Ionic application, and we'll use it to push the info page on top of the home page when the button is clicked.

We'll also need to import the InfoPage component. Put these lines at the top of your home.ts file.

1	import { NavController } from 'ionic-angular';
2	import { InfoPage } from '../info/info';

Next, we'll modify the home page component to receive an instance of NavController via dependency injection. Change the home page constructor to the following:

1	constructor(public navCtrl: NavController) {
2	}

Finally, we can declare the navigateToInfo function inside of our HomePage component.

1	navigateToInfo() {
2	this.navCtrl.push(InfoPage)
3	}

All we do is push a reference to the info page component to the NavController.

Update the Info Page

With the above complete, navigate to the info.html page, and add a new header to ion-content. Perhaps something like <h2>This is awesome...</h2>.

Now, if you run your application and click the Navigate to Info button on the home page, you will see your newly created info page. Also note the back button, which is automatically created for you by Ionic.

Congratulations! You have successfully created and navigated to a new page. Feel free to repeat this process and create other pages within this demo project.

Conclusion

So far in this series, we've managed to create a new Ionic project, create new pages, edit the contents of our pages, and set up navigation. We've now covered a few of the core concepts that will aid us further as we continue on our journey of developing Ionic applications.

While you're here, check out some of our other posts about Ionic app development!