This document discusses navigation and routing in Ionic apps. It begins with an introduction to Ionic and its key features like being platform independent and supporting cross-platform development. It then covers navigation properties, how navigation works using the stack controller and nav controller, lifecycle hooks for pages, and tabs navigation. It also discusses route guards like canActivate and canLoad that control navigation. The presentation includes an agenda and concludes with references.

1. Presented By:Anirudh Singh Chauhan
Navigation and Routing
in Ionic Apps

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Join the session 5 minutes prior to
the session start time. We start on
time and conclude on time!
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

3. Agenda
01
Navigation & Routing
02
How Navigation Works?
03
LifeCycle Hooks
04
Tabs Navigation in Ionic
05
Demo
06
Introduction & key features of Ionic

4. Introduction to Ionic
● Ionic Framework is an open-source UI toolkit that allows high-quality mobile and
desktop applications to be developed using web technologies.
● Ionic Architecture is based on the application’s interface or user experience.
● It is easy to learn, easy to integrate, or used standalone without a front frame
using a simple script including other libraries or frameworks

5. Key features of Ionic
● Platform Independent Framework
● Cross-Platform Mobile Application Development
● Default User Interface
● Comprehensive Integration With Angular/React etc
● Capacitor & Cordova Plugins
● Designed for Elegance and High Performance
● Extended Technology
● Integration with Various Extensions

6. Navigation & Routing
● Navigation properties describe the relationship between two
entity types. They allow us to navigate from one end of the
relationship to the other end.
● It is switching between the pages.
/products [navigate()/routerlink] /products/id5

7. How Navigation Works?
/products navigate()/routerlink /products/id
Ionic StackController
Internal
Stack of Pages
Ionic NavController
Injectable
<ion-back-button>
navigate()/routerlink
Push Page
Pop Page

8. LifeCycle Hooks
Angular Component
ngOnInit
Ionic Pages
ngOnDestroy
ionViewDidLeave
ionViewWillLeave
ionViewDidEnter
ionViewWillEnter

9. Ionic Page Events
Event Name Description
ionViewWillEnter Fired when the component routing to is about to
animate into view.
ionViewDidEnter Fired when the component routing to has finished
animating.
ionViewWillLeave Fired when the component routing from is about to
animate.
ionViewDidLeave Fired when the component routing to has finished
animating.

10. Tabs in Ionic
● Ionic Tabs are considered to be the top-level
navigation component and helps to add tab-based
navigation.
● The ion-tabs component is a router outlet without
having a particular style.
● It has separate set of navigation page-stacks.

11. Route guards in Ionic
● Route guards create the process of protecting few routes and redirecting the user
quite simple. Ionic guards like ionViewCanEnter to determine whether or not a user
could navigate to a page.
● The basic idea behind a route guard is that you attach a service that acts as the
“route guard” to a particular route.

12. 1. canActivate
Service has a canActivate method which will result in either true or false
depending on whether the user should be permitted to go to that route or
not.
2. canLoad
● canLoad can be used instead of canActivate to entirely prevent the
loading of the children for that route (rather than just preventing access).
● canLoad guard is used to decide if a module can be loaded or not.

13. Demo

14. Demo

15. ● https://ionicframework.com/docs
● https://www.javatpoint.com/ionic
● https://ionicframework.com/docs/components/ion-tabs
References

16. Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA