With the introduction of Ionic 4, we have seen a shift in responsibility for navigation from Ionic itself to whatever the underlying framework being used is. That means that if we are using Angular to build an Ionic application, then we should rely on Angular’s own concepts for navigation (even though it is still technically possible to use Ionic’s own <ion-nav> component).
In this video tutorial, we will cover the basic concepts for navigation when building an Ionic/Angular application, including how to pass data from one page to another.
Watch the video on YouTube: Click here
Video Transcript
In this video, we’re going to be looking at how navigation works in an Ionic 4 application that’s using angular. Now, to do this we’re going to be using this QuickLists application that is on screen now. This is actually an example from my Building Mobile Apps with Ionic an angular book. You don’t need the book to watch this lesson but we’re just going to use this as an example because it uses a lot of the new navigation concepts and it serves as a really good example.
0:31
If we’re talking about just vanilla Ionic 4, when it comes to navigation you would use the ion-nav component which I have up on the screen now (0:43). If you’ve used previous versions of Ionic, you would have used ion-nav. This is what we use to push and pop views with. If we have a look at the API for this ion-nav component, you’ll see the various properties and methods here. You can see down here (1:01) we have all the methods people would be familiar with (if you have used this in the past like pop and push) and this is still what you would use if you were just using Ionic without a framework and you can still even use this inside of an angular application as well.
1:17
In general, the new approach with Ionic is kind of to let the frameworks do what they want, they can handle all of the framework stuff and Ionic handles mostly the UI. That means when we’re building an angular application when we’re using Ionic in an angular application we will just be using the angular style of navigation. So, what that means is that we will be using routes. So, rather than pushing and popping various pages in our application we will generally set up a bunch of routes that look like this.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/checklists', pathMatch: 'full' },
{ path: 'intro', loadChildren: './intro/intro.module#IntroPageModule' },
{ path: 'checklists', loadChildren: './home/home.module#HomePageModule' },
{
path: 'checklists/:id',
loadChildren: './checklist/checklist.module#ChecklistPageModule',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}1:50
They might be spread across multiple different module files or they can all just be in a single app.routing.module.ts file. Basically, all this does is link a particular URL path with a particular component. In this case, I’m linking the intro path to my intro page module and so if we go into the application and we hit the intro path in the URL it’s going to load up that component. If instead, we say go to checklist it’s going to load up the homepage instead.
2:22
So, if we just jump into the browser now just a quick look at what that looks like. I have the application served here (2:29). So, you can see here the default is this /checklist and so that’s hitting this path in the app.routing.module.ts file. That’s because we’ve got the default path here set to redirect to the checklist path. So, whenever we load up the application that’s going to hit this and it’s going to load the home page which is what is on screen now. If I was to say click one of these items I have set up here – I’ll click that and you can see now that it’s going to checklist/prepare-for-trip and it’s a separate route I have set up here with an ID – I’ll talk a little bit more about that later. Since the application can see we’re at checklist/prepare-for-trip it’s matching this path here (3:10). So, it’s going to load the checklist page. This handles matching the specific route depending on the path that is in the URL and then it knows what component to load and then whatever component is meant to be loaded that is then displayed inside of the router outlet.
3:30
If we open up the app.component.html file here, this is the template for our route component in the angular application. With angular applications, you’ll typically use something called router outlet and basically what that does is whatever path has been matched, whatever route has been matched, it’s going to take that component and display it in the app.component.html file. That’s what determines what is actually displayed on the screen. In the case of Ionic, they actually have their own sort of special implementation of that called ion-router-outlet and basically, that just adds a bit of Ionic functionality on top of the standard angular router. Specifically, things like when you transition from one page to another, you’re going to get that nice mobile style animation between the pages rather than just flicking to a new page. Aside from that though the concepts are all pretty much exactly the same as a standard angular application. You can look at you know to Ionic Documentation for some things but you could also just look directly at the standard angular way to do things and look at the angular documentation. If you were say using something like View or React instead then you would look at their documentation for how to handle navigation. So, rather than Ionic trying to force their own navigation concepts into all these different frameworks they sort of just take a step back and allow the frameworks themselves to define that.
4:50
Once we have our routes to find in our application we know we can go to a specific URL path and it’s going to load up with the correct component and display that on the screen. Obviously, when a user is using the application they’re not going to be using the URL bar to navigate. If I want to go back to the checklist page I’m not going to backspace that and hit enter to do that, I’m going to navigate within the application itself. We need to look at the ways that we can go about navigating using our application.
5:23
That’s sort of why I wanted to pick this application as an example because it kind of uses most of the different ways that you can navigate. One of the primary ways you are going to navigate is just by using a simple href. If you’re familiar with HTML and the web in general, I’m sure you would have used an href at some point. Generally, we use that with an anchor tag to link to another page but in this case, we just attach it to whatever we are trying to turn into a link. I do want to quickly mention that it is better to attach an href attribute to either an anchor tag or a button, especially in terms of accessibility and usability but it is a bit unclear at this stage exactly how attaching a link to an item, for example, should be handled in Ionic 4 this is still the beta we’re looking at now so that will probably change a little bit in the future so just keep that in mind. I probably won’t end up looking exactly like this. Basically, if we pretend this was just a standard anchor tag or a button we supply the href to the path we want to go to and we also supply this routered direction which is going to help apply the correct animation to the transition. If your just clicking on a link, for example, the ion-router outlet isn’t going to know if that is a forward transition or if that is a backward transition, are we going forward into our application or are we going back to a previous page. So, it can guess at this but to make sure it gets it right you can supply the router direction to specify what the direction should be. This can either be forward, backward or root.
7:03
You’ll see in the href in the home.page.html file here, I’m using the square brackets because I’m not just giving a literal string, I’m actually giving an expression to be calculated here. I’ve got the string checklists and then I’m doing forward slash whatever the checklist ID is which is coming from our ngFor loop here. So, the result from that is just you know whatever is clicked will take the ID, pop it into the URL and then it hits the other route we had set up. Aside from using an href to navigate between pages, we can also navigate programmatically and we can do that using a nav controller. Again, if you’ve used previous versions of Ionic you’d probably already be familiar with nav controller, this has changed a bit in Ionic 4. Basically, we just inject that into our page like we usually would have a reference set up here for nav controller and then I can access that and then specify which route I want to go to.
8:02
In this application what we’re doing is we’re checking if the introduction tutorial has been shown before. If it has, we don’t want to show it again but if it hasn’t, we do want to show it. All this does is check a value and then if it hasn’t been shown we say
this.navCtrl.goRoot('/intro')
8:25
All we do is supply the URL path that we want to go that matches the route that we want to display and then that’s going to display that for us. Now, I’ve used goRoot here because that’s a root transition we’re changing like the root of the navigation stack but you can also use go forward and go back. It’s the same kind of idea as the router direction, you just want to supply the direction so that the screen transition can animate correctly.
8:52
So, the last concept I want to touch on is passing data between pages. Again, I’ll reference older versions of Ionic. You may be used to passing data through the nav control, accessing that through nav params. You can basically pass whatever objects you wanted between pages that way. It’s a bit different with the angular routing. As you can see in the application here when we click on this item we’re passing the ID through the URL and so you can pass whatever kind of information you want to pass to another page through the URL but it’s generally not a good idea if you want to pass a massive object or really anything more than just a simple ID or value. If you’re trying to pass that through the URL, it’s going to look really ugly and it’s just not really a good way to do it. Instead, what we generally do now is if you want to say, for this example, I have a list of checklists here and then when I click on this (9:52) I go to another page and I want to see all the items associated with that checklist. So, rather than passing the object through to the next page when I’m navigating, we just pass a simple ID which in this case is just “prepare for trip”. You could use simple numeric IDs if you wanted but obviously something like this looks a bit better, it’s a little bit more user-friendly if you’re going to be displaying this on the web. Basically, we’ll grab that ID and then use the service to grab the full object.
10:20
If we take a quick look at how that works. If I jump into the checklist.page.ts file, you can see that I grab the slug or the ID from the URL using this.route.snapshot.paramMap.get('id');.Obviously, it’s a bit of a mouthful but basically, we’re just injecting angular’s activated route service here and then this is just a way that we can grab the ID value from the URL.
10:52
Again, if we take a quick look back at our app routing module, you can see here I’ve set up that parameter here of ID by putting a colon in front of it. Whatever is passed in in the URL in that position there will be grab using that method I just showed you there with the paramMap. Once we have that ID we can use a service to get whatever we want basically. In this example, I’m using my data service that I’ve injected into this page here. I’ve got something I’ve called data service which is an instance of my checklist out of service there so I call this.data.service.getChecklist and then I pass in that slug value, that ID.
11:29
If I open up my data service in the checklist-data.service.ts file, we should have a get checklist function there and then we just grab whatever checklist we were looking for we just grab that from the checklist array that is set up. So, rather than passing data objects directly between our pages, we’re just passing a simple ID and then using that ID to grab whatever we need from a service. In this case, obviously, we’re just grabbing it all this service here loads it in from this local storage and then we’re just grabbing a reference to that from this array here. You could also say you have if you maybe you who came up to firebase or some other back-end you could instead you know grab that ID and then fire off a request somewhere perhaps and I get some response back and then use that value. This obviously depends on you know what your application does.
12:18
That was just a basic overview of how navigation works in an Ionic 4 and angular application. Obviously, there is a few more things to know than that but they are the basics and that should get you most of the way there. As I mentioned this was an example from my Building Mobile Apps with Ionic and angular books so if you would like to check that out I have a link in the description and also has some links to my Twitter and stuff like that if you’d like to follow me on there as well. Thank you for watching this video and I’ll see you in the next one.