Understanding Ionic/Angular 4 : Creating Pages and Navigation Systems
Receive new Ionic 4 tutorials.
In this tutorial we'll learn how to create pages and navigation in your Ionic 4 application based on Angular.
Generating a New Ionic 4 Project
Let's start our journey by generating a new Ionic 4 project based on Angular using the Ionic CLI 4. In your terminal, run the following command:
$ ionic start navigationApp blank --type=angular
Generating Ionic 4 Pages
Next, let's generate tow pages in our application for about and contact. In your terminal run the following commands:
$ ionic generate page about $ ionic generate page contact
Adding Navigation Between Pages
At this point, we have three pages - home, contact and about. We need to add navigation from the home to about and contact pages.
There are many ways to implement navigation between pages in your Ionic 4 app.
Basic Navigation System
We are going to use
app.ts file you should notice that there is already a navigation controller:
In order to use this navigation controller from other pages you only need to inject it via the class constructor of the corresponding page. To actually navigate between pages you need to push and pop pages from the injected navigation controller.
Now to be able to navigate from
AboutPage we only need to import
AboutPage and push it to the history stack then the navigation controller will take care of the rest.
Add the following code to
And then bind this method to a
click event using the following code:
Next, add the following code to
In this navigation system; the current page is always on the the top of the navigation stack and to manipulate the top of the stack you have two methods -
pop; push to add another page to the stack top and pop to remove the current page from the top.
You can also have a ready Back button by just adding a
<ion-navbar> component to your pages header.
In each child page header add the following code:
Please notice that you can only use this simple navigation system if there's a simple parent child relationship between your pages.
In our case
HomePage is a parent of both
HomePage is the root of our navigation controller which is injected into
Now what if you have a more complex relationship between your pages such as having multiple root pages. In this case you have the choice between two navigation systems either the
tab or the
menu based navigation systems.
Ionic 4 Tab Based Navigation
Imagine that we have many top level pages without any parent child relationship between them.
Instead we need to be able to navigate to any page of them, we choose, from one place.
The tab system comes to the rescue. Implementing this navigation system is really easy with Ionic 4. All you have to do is adding a
tabs page with the following command:
Next, add the following code inside the
tabs.ts file add the following code:
No you should change the root property of
<ion-nav> in the
app.ts file to point to tabs.
Ionic 4 Menu Based Navigation
The recommended method of navigation by the ionic team is tabs but sometimes when you have many top level pages we can not use the tab system.
In this case we can substitue tabs with a side menu to navigate between between root pages. So let's add a side menu to our app.
app.ts file and change the template to the following code:
Next, add the following code to the
This is the full content of the
That's all for this quick tutorial. We have learned how to create pages and add simple, tabs and menu based navigation in our Ionic 4 application based on Angular
Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.
You can reach the author via Twitter:Follow @ahmedbouchefra
About the author
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial