Basic Navigation in Ionic Applications

Oct 31, 2017

2 min read

#ionic

Originally Published at Hackernoon.com

Navigation in Ionic does not work using normal routing like you might have done in some of the client side web frameworks, especially when compared to browser based navigation. It uses the terminology of pages which I find is more generalised and correctly named as compared Ionic version 1's states. This approach is quite similar to navigation in a native mobile application.

Pages are pushed and popped from the navigation controller a class defined whose subclass available in Ionic is ion-nav. The logic here is equivalent to that of a stack. The purpose of ion-nav is to work with the navigation stack.

To define a nav bar in an ionic app:

HTML icon

1<!--Home.html-->
2<ion-navbar>
3 <ion-title> Ionic App </ion-title>
4</ion-navbar>

Inside the typescript file associated to above HTML code, we will have access to Navigation Controller.

TypeScript icon

1// home.ts
2import { Component } from '@angular/core';
3import { NavController } from 'ionic-angular';
4
5@Component({
6 selector: 'page-home',
7 templateUrl: 'home.html'
8})
9export class HomePage {
10 constructor(public navCtrl: NavController) {}
11}

Thus, we can access NavController and it's properties such as push and pop to navigate to a different page or back to the previous page.

Note: Deeplinking is available in Ionic with URLs but that is altogether a different topic.


⬅️ Previous: Using Google Fonts in an Ionic Application

Next: How to use Font Awesome in an Ionic Application ➡️

Enjoyed this post? Sign up to my newsletter!

A periodic update about my recent blog posts and tutorials. Join 1300+ devs!

No spam, unsubscribe at any time!

Subscribe on Revue

HomeBlogNewsletterAbout meSpeakingEmail

©  2019-2022 Aman Mittal · All Rights Reserved