Ionic makes it easy to create mutiple pages navigation using as the genesis of navigation stack. In this little application, I will try to make the concept clear to you. NavController Generate Application and Pages To start with, let’s create a new Ionic app for this showcase. Follow along with me. To get started, we have to scaffold a new project, my favorite one-to-go Ionic CLI command: in to the new project created by the above Ionic CLI command and run to see the blank template with just a homepage available. We will create two new pages in this application to showcase our motive. cd ionic serve To read about the basic Navigation in an Ionic app, see this. Now, with the help of Ionic CLI, let’s generate two new pages before diviing into our code base. I am naming the two new pages generic but you can name them anything you want. Just follow the convention when importing the modules. Inside the you can see, there are two new folders with the names we generated. Each have its own , and file, thus, completing a web component on which every Ionic and Angular apps are based on. app/pages .ts .html .scss To proceed, we need to add both the pages in our : app.module.ts Setup Home Page for Basic Navigation As the is updated with our changes, the scope of the whole application can now access these two new pages. To implement the navigation between them, we have to first update our with buttons that will navigate to a specific page and business logic behind those events in . app.module.ts home.html home.ts Let’s update as well. home.ts The function will help us in navigating to the desired page and button will bring us to the previous page in the navigation stack. This is important! I mentioned to the previous page, not the home page. If you are familiar with Ionic 1, this would how state will work. goTo() back Updating Page1 and Page2 To continue to develop our demo application, we need to update our and components. Page1 Page2 Similar for the : Page2 Running the App If we save all the files and again from the terminal run: The output shown can be best described in these screenshots: This is just a glimpse of how multi page navigation in Ionic might work that might help you to get started with development. To get the full code, you can visit this Github Repository Want to receive more articles like this one? Subscribe me here . Sometimes, I send “never seen before” content to my subscribers. I am also on Twitter _The latest Tweets from Aman Mittal 🖖 (@amanhimself). #BookBlogger @ https://t.co/UQvyNf1OTC | Developer | #Nodejs |…_twitter.com Aman Mittal 🖖 (@amanhimself) | Twitter

Twitter

Passing Data Between Pages in an Ionic Application

Ionic 2/3 CLI Reference

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

Make resilience your competitive advantage

Multi Page Navigation in an Ionic App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 things I learnt from Steal Like An Artist

25 Stories To Learn About Angularjs

15 Proven Optimization Tips For Angularjs Development To Speed Up Your Web App Performance

15 Best Web Development Tools To Use In 2021

5 Best JavaScript Frameworks in 2017

5 things I learnt from Steal Like An Artist

25 Stories To Learn About Angularjs

15 Proven Optimization Tips For Angularjs Development To Speed Up Your Web App Performance

15 Best Web Development Tools To Use In 2021

5 Best JavaScript Frameworks in 2017

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps