Learn how to use the Angular Router in Ionic 4 to handle navigation in your mobile app https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/

- Ionic 4 Migration https://beta.ionicframework.com/docs/building/migration#navigation
- Angular Router https://angular.io/api/router
2024-02-04T07:18:19.640Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ef71efc8-a8cc-4b9d-a3d2-bacbd4ac32ce
6e71a0b9d1acbdd485db78a20518ecd92daf2d02d2fc5219532ac642bdb86a7e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
The single most important change in Ionic 4 is the way navigation works.
If you're migrating from version 3, then you're probably familiar with Ionic's nav controller roller and the ion nav component, but they've been deprecated in favor of the Angular router, which is far more powerful.
In today's video, you'll learn everything you need to know to be successful with the Angular router in Ionic 4, and I'll show you a few advanced techniques that you can start putting to use right away.
If you're new here, like and subscribe, and you can find the source code at angularfirebase com.
So prior to Ionic 4, the framework used its own built in nav controller and component to handle the navigation between pages in a push pop style way that you would see on a mobile application.
I'd like to point out that the nav controller will still technically work in Ionic four, so you might see some tutorials out there on the web that use it.
But it's not the preferred way to handle navigation and will likely not be possible in the future.
I'm gonna go ahead and assume that you know nothing about the Angular router, so we'll start with the absolute basics and then build up to some pretty advanced concepts towards the end.
And also make sure to watch my Angular Routing Basics video which is very relevant to the topic at hand here.
And before we do anything, I wanna give you a pro tip, and that is to install the Augury plugin for Angular.
You can find it on the Chrome store, and it will you a ton by visualizing your actual router tree.
So you can see here that everything kind of starts from the app component, then we have a couple of lazy loaded pages, and so on.
This is a pretty basic setup here, but it becomes very valuable as your complexity grows.
I've gone ahead and generated a brand new Ionic four app that's using the tabs template.
And when we open this application up, the first place we'll go is into the app directory and then open the app routing module.
The only thing you'll ever really change in this file is the routes array which is an array of objects where you define the actual routes in your application.
There are 3 basic types of routes that you can define.
Your typical vanilla route would just be one that loads a component.
Then in Ionic, we have lazy loaded routes which are automatically generated with the Ionic CLI as we'll see here in a minute.
Then you might also set up a redirect to take one path and point it to some other path.
If we look inside the app routing module here, you'll notice that it has the load children property that points to a different module in this app.
That's an example of lazy loading which is a really important concept with Ionic.
When you generate a page with the Ionic CLI, it will be lazy loaded by default.
And what that means is it's using a feature from Webpack called code splitting.
And the reason we lazy load things all comes down to performance for progressive web apps.
This pattern allows us to split our code into smaller chunks, which will give us faster initial page load speeds on the web.
So let's look at something a little more practical.
Let's go ahead and generate a new page, and then we'll do some routing to and from that page.
So I'll say Ionic generate page and I'll call this the animals page.
Then you'll notice it sets up a new path in that routes array.
Then it adds the load children property to point to the module that has that lazy loaded code.
So that's going to render the animal's page component when the animal's path gets activated.
But where does that page actually get displayed?
Whenever a certain route is activated, it will render the page within a specific outlet.
By default, you have this Ion router outlet inside the app component.
So when we navigate to different pages or components, It will render that code specifically where this outlet lives.
This Ion router outlet is specifically for Ionic, but it's just like the regular Angular router with additional internal things going on to handle the transition animations between pages.
Now let's take a look at how we might navigate from our home page to the newly created animals page.
And it's actually really simple.
All we have to do is set up a button and give it an HREF attribute and then have it point to whatever path we defined.
If you're familiar with the Angular router, you probably know that hrefs don't really work, and you need to use the router link directive.
In Ionic, it works a little bit different.
If you're defining the link on an actual Ionic component, it will intercept that link and use the Angular router as it should appropriately.
And as far as I can tell, you can still use router link on non Ionic components without any drawbacks.
As you can see in our demo here, if we click on the animal's link, it will navigate to that page with a nice back and forth animation.
But a lot of times in your app, you won't just be able to navigate with a basic link like this.
You'll need to do it in a more programmatic kind of way.
To demonstrate this, I'll create another Ionic button.
But instead of using an hreflink, I'll go ahead and use a click event and handle it with a method inside of the component typescript.
This will actually behave exactly like this HREF link, but we'll be handling everything from directly inside our component which gives us a lot more control to do things programmatically.
Angular exposes the router to us as a service, which means we can inject it in the constructor and use it in any one of our components.
There's a number of different things you can do with the router, But for now, we'll just use it to navigate from 1 URL to another.
Once we have it injected, it's as easy as calling this dotrouter.navigate And then it expects an array where each item in that array is a URL segment.
In this case, we just want to navigate to the animal's path, so we pass that in as the first item in the array.
Then if we go into the demo, you can see it navigates and looks exactly like our previous link did.
But the important takeaway here is that you can access the router to navigate by whatever kind of code and logic that you want to write.
And just another little Side note here, instead of navigate, you can call navigate by URL and pass in a URL string directly if that's easier for you.
Now that we know how to move from one path to the next, let's go ahead and see how we can use dynamic data in our routes.
A common use case here is when you have a database full of items and each of those items has an ID.
You might start by showing a list, then the user navigates to a route that has a specific item ID in it.
And then you pull that ID from the database and show its data in the UI.
So we already have an animal's page.
Let's go ahead and generate another component that's specifically for showing a specific animal ID assuming that we have that data in a database somewhere.
One pro tip here is to nest your components inside of a lazy loaded page, And it will automatically add the route as a child route of that component and keep it lazy loaded, so it's performant within the app.
So if we go into our animals module, you can see that it now has this profile component in there and we can create our own child routes for it.
So the root path is just blank which would be animals because that was declared in the app routing module.
Then if we want to route to a dynamic ID, we'll set up another path here where the path is colon ID and then it renders the profile component.
So it'll be the profile component's responsibility to check the ID and then pull the data from the database.
Base.
So now let's go ahead and route to this component just like we would with a regular HREF link.
The path will be animals / whatever ID happens to be there.
In this case, I'll just pass in some random ID.
If we route to this ID in the UI, you can see that it renders the profile component.
And any URL that's in front of animals will render it, but it's still not very dynamic because we're not doing anything dynamic with the ID.
To be able to extract the ID from the URL, we're going to use a service in Angular called ActivatedRoute.
So we'll jump into our profile component.
And then in the constructor, we'll inject activated route.
We can get our parameters as a plain string or an observable if we care about future changes to it.
For this example, we'll just go ahead and get it as a snapshot, which means we'll read it once when the component's initially rendered and we don't really care what happens to that value in the future.
So we'll say this route snapshot dot parammapgitid.
And just so we can visually verify this, I'll set up the ID as a property on the component.
And then we'll display that in the UI and watch it update dynamically.
If we go back to our demo now, you can see that every time we navigate to a different URL, we get a different ID displayed in the UI.
So in other words, we're extracting data from the URL and using it in our actual application code.
The next big topic I want to talk about is quite a bit more complex, but a lot of people have asked me how the new tabs template in Ionic 4 works.
Even though the nav controller is deprecated, Ionic still supports a push pop style of navigation.
But it does so using a thing called named outlets with the Angular router.
Earlier in the video, we looked at the Ionic router outlet.
But what I haven't mentioned yet is that you can use multiple outlets within the same app.
Basically, you can create secondary outlets that have that specific name and then render content within that secondary view based on a route change.
So in this case here, we have a path and an outlet.
And if we look in the HTML, we can see that we have multiple router outlets on this page, each one with its own name property.
The reason we have our routing set up this way for the tabs page is so that we can show the actual tab bar at the bottom of the view whenever a route is changed.
The big thing to keep in mind is that if you wanna show the tab bar at the bottom, you want to route to one of the secondary outlets and not the root outlet.
The root outlet will take up the entire viewport while one of the secondary outlets will still show the tabs at the bottom.
The final thing I wanna talk about in this video are Angular router guards.
Guards are a special type of service in Angular that implement a method that can be understood by the router.
In most cases, you'll implement the can activate method which returns a boolean that determines whether or not a route can be activated.
I'd say the most common use case is when you have user authentication and you want to lock down certain routes based on the user's authentication state.
When we generate a guard from the command line, it will generate a file that looks like this.
And everything here is basically just boilerplate except that we want to implement this can activate method and have it return a Boolean or something that resolves to a Boolean like a Promise or an Observable.
A common pattern I see is to inject the Angular router inside of a guard, then we can redirect the user if they're trying to access a route that they shouldn't be activating.
To demonstrate how this works, I'm going to set up a Boolean variable here called logged in, and it will just have a 5050 chance of being true or false.
If the user is not logged in, then we'll want to redirect them back to the root URL or maybe you wanna redirect them to a sign up page.
And then we'll return the boolean value from this method.
If it's true, then the route will be activated.
But if it's false, it will be blocked and the component will never get rendered.
The great thing about guards is that we can write them once and then apply them to as many routes as we need.
They provide really good code reusability.
For example, we can go into our app routing module.
And if we want to protect our animal's route, We can add the canActivate property and then add the auth guard to it.
And you can even add multiple guards to a single route.
If you watch closely here, I'm console logging the authentication state from our guard in the console, and you'll notice that when it's false, nothing will happen with the route change.
But when it's true, it will actually navigate to the requested route.
In about a week, we'll expand on all these routing concepts with my new Ionic 4 Fire Base course where we'll build out a variety of different real world features that use these routing concepts.
If this video helped you, like and subscribe.
And if you wanna get access to that course Free, consider upgrading to a Pro membership at angularfirebase.com.
Not only will you get access to the upcoming course, but you'll also get access to a whole bunch of content designed to help you build and ship your app faster.
Thanks for watching, and I'll talk to you soon.

Speaker 0: The single most important change in Ionic 4 is the way navigation works. If you're migrating from version 3, then you're probably familiar with Ionic's nav controller roller and the ion nav component, but they've been deprecated in favor of the Angular router, which is far more powerful. In today's video, you'll learn everything you need to know to be successful with the Angular router in Ionic 4, and I'll show you a few advanced techniques that you can start putting to use right away. If you're new here, like and subscribe, and you can find the source code at angularfirebase com. So prior to Ionic 4, the framework used its own built in nav controller and component to handle the navigation between pages in a push pop style way that you would see on a mobile application.

I'd like to point out that the nav controller will still technically work in Ionic four, so you might see some tutorials out there on the web that use it. But it's not the preferred way to handle navigation and will likely not be possible in the future. I'm gonna go ahead and assume that you know nothing about the Angular router, so we'll start with the absolute basics and then build up to some pretty advanced concepts towards the end. And also make sure to watch my Angular Routing Basics video which is very relevant to the topic at hand here. And before we do anything, I wanna give you a pro tip, and that is to install the Augury plugin for Angular.

You can find it on the Chrome store, and it will you a ton by visualizing your actual router tree. So you can see here that everything kind of starts from the app component, then we have a couple of lazy loaded pages, and so on. This is a pretty basic setup here, but it becomes very valuable as your complexity grows. I've gone ahead and generated a brand new Ionic four app that's using the tabs template. And when we open this application up, the first place we'll go is into the app directory and then open the app routing module.

The only thing you'll ever really change in this file is the routes array which is an array of objects where you define the actual routes in your application. There are 3 basic types of routes that you can define. Your typical vanilla route would just be one that loads a component. Then in Ionic, we have lazy loaded routes which are automatically generated with the Ionic CLI as we'll see here in a minute. Then you might also set up a redirect to take one path and point it to some other path.

If we look inside the app routing module here, you'll notice that it has the load children property that points to a different module in this app. That's an example of lazy loading which is a really important concept with Ionic. When you generate a page with the Ionic CLI, it will be lazy loaded by default. And what that means is it's using a feature from Webpack called code splitting. And the reason we lazy load things all comes down to performance for progressive web apps.

This pattern allows us to split our code into smaller chunks, which will give us faster initial page load speeds on the web. So let's look at something a little more practical. Let's go ahead and generate a new page, and then we'll do some routing to and from that page. So I'll say Ionic generate page and I'll call this the animals page. Then you'll notice it sets up a new path in that routes array.

Then it adds the load children property to point to the module that has that lazy loaded code. So that's going to render the animal's page component when the animal's path gets activated. But where does that page actually get displayed? Whenever a certain route is activated, it will render the page within a specific outlet. By default, you have this Ion router outlet inside the app component.

So when we navigate to different pages or components, It will render that code specifically where this outlet lives. This Ion router outlet is specifically for Ionic, but it's just like the regular Angular router with additional internal things going on to handle the transition animations between pages. Now let's take a look at how we might navigate from our home page to the newly created animals page. And it's actually really simple. All we have to do is set up a button and give it an HREF attribute and then have it point to whatever path we defined.

If you're familiar with the Angular router, you probably know that hrefs don't really work, and you need to use the router link directive. In Ionic, it works a little bit different. If you're defining the link on an actual Ionic component, it will intercept that link and use the Angular router as it should appropriately. And as far as I can tell, you can still use router link on non Ionic components without any drawbacks. As you can see in our demo here, if we click on the animal's link, it will navigate to that page with a nice back and forth animation.

But a lot of times in your app, you won't just be able to navigate with a basic link like this. You'll need to do it in a more programmatic kind of way. To demonstrate this, I'll create another Ionic button. But instead of using an hreflink, I'll go ahead and use a click event and handle it with a method inside of the component typescript. This will actually behave exactly like this HREF link, but we'll be handling everything from directly inside our component which gives us a lot more control to do things programmatically.

Angular exposes the router to us as a service, which means we can inject it in the constructor and use it in any one of our components. There's a number of different things you can do with the router, But for now, we'll just use it to navigate from 1 URL to another. Once we have it injected, it's as easy as calling this dotrouter.navigate And then it expects an array where each item in that array is a URL segment. In this case, we just want to navigate to the animal's path, so we pass that in as the first item in the array. Then if we go into the demo, you can see it navigates and looks exactly like our previous link did.

But the important takeaway here is that you can access the router to navigate by whatever kind of code and logic that you want to write. And just another little Side note here, instead of navigate, you can call navigate by URL and pass in a URL string directly if that's easier for you. Now that we know how to move from one path to the next, let's go ahead and see how we can use dynamic data in our routes. A common use case here is when you have a database full of items and each of those items has an ID. You might start by showing a list, then the user navigates to a route that has a specific item ID in it.

And then you pull that ID from the database and show its data in the UI. So we already have an animal's page. Let's go ahead and generate another component that's specifically for showing a specific animal ID assuming that we have that data in a database somewhere. One pro tip here is to nest your components inside of a lazy loaded page, And it will automatically add the route as a child route of that component and keep it lazy loaded, so it's performant within the app. So if we go into our animals module, you can see that it now has this profile component in there and we can create our own child routes for it.

So the root path is just blank which would be animals because that was declared in the app routing module. Then if we want to route to a dynamic ID, we'll set up another path here where the path is colon ID and then it renders the profile component. So it'll be the profile component's responsibility to check the ID and then pull the data from the database. Base. So now let's go ahead and route to this component just like we would with a regular HREF link.

The path will be animals / whatever ID happens to be there. In this case, I'll just pass in some random ID. If we route to this ID in the UI, you can see that it renders the profile component. And any URL that's in front of animals will render it, but it's still not very dynamic because we're not doing anything dynamic with the ID. To be able to extract the ID from the URL, we're going to use a service in Angular called ActivatedRoute.

So we'll jump into our profile component. And then in the constructor, we'll inject activated route. We can get our parameters as a plain string or an observable if we care about future changes to it. For this example, we'll just go ahead and get it as a snapshot, which means we'll read it once when the component's initially rendered and we don't really care what happens to that value in the future. So we'll say this route snapshot dot parammapgitid.

And just so we can visually verify this, I'll set up the ID as a property on the component. And then we'll display that in the UI and watch it update dynamically. If we go back to our demo now, you can see that every time we navigate to a different URL, we get a different ID displayed in the UI. So in other words, we're extracting data from the URL and using it in our actual application code. The next big topic I want to talk about is quite a bit more complex, but a lot of people have asked me how the new tabs template in Ionic 4 works.

Even though the nav controller is deprecated, Ionic still supports a push pop style of navigation. But it does so using a thing called named outlets with the Angular router. Earlier in the video, we looked at the Ionic router outlet. But what I haven't mentioned yet is that you can use multiple outlets within the same app. Basically, you can create secondary outlets that have that specific name and then render content within that secondary view based on a route change.

So in this case here, we have a path and an outlet. And if we look in the HTML, we can see that we have multiple router outlets on this page, each one with its own name property. The reason we have our routing set up this way for the tabs page is so that we can show the actual tab bar at the bottom of the view whenever a route is changed. The big thing to keep in mind is that if you wanna show the tab bar at the bottom, you want to route to one of the secondary outlets and not the root outlet. The root outlet will take up the entire viewport while one of the secondary outlets will still show the tabs at the bottom.

The final thing I wanna talk about in this video are Angular router guards. Guards are a special type of service in Angular that implement a method that can be understood by the router. In most cases, you'll implement the can activate method which returns a boolean that determines whether or not a route can be activated. I'd say the most common use case is when you have user authentication and you want to lock down certain routes based on the user's authentication state. When we generate a guard from the command line, it will generate a file that looks like this.

And everything here is basically just boilerplate except that we want to implement this can activate method and have it return a Boolean or something that resolves to a Boolean like a Promise or an Observable. A common pattern I see is to inject the Angular router inside of a guard, then we can redirect the user if they're trying to access a route that they shouldn't be activating. To demonstrate how this works, I'm going to set up a Boolean variable here called logged in, and it will just have a 5050 chance of being true or false. If the user is not logged in, then we'll want to redirect them back to the root URL or maybe you wanna redirect them to a sign up page. And then we'll return the boolean value from this method.

If it's true, then the route will be activated. But if it's false, it will be blocked and the component will never get rendered. The great thing about guards is that we can write them once and then apply them to as many routes as we need. They provide really good code reusability. For example, we can go into our app routing module.

And if we want to protect our animal's route, We can add the canActivate property and then add the auth guard to it. And you can even add multiple guards to a single route. If you watch closely here, I'm console logging the authentication state from our guard in the console, and you'll notice that when it's false, nothing will happen with the route change. But when it's true, it will actually navigate to the requested route. In about a week, we'll expand on all these routing concepts with my new Ionic 4 Fire Base course where we'll build out a variety of different real world features that use these routing concepts.

If this video helped you, like and subscribe. And if you wanna get access to that course Free, consider upgrading to a Pro membership at angularfirebase.com. Not only will you get access to the upcoming course, but you'll also get access to a whole bunch of content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
The single most important change in Ionic 4 is the way navigation works. If you're migrating from version 3, then you're probably familiar with Ionic's nav controller roller and the ion nav component, but they've been deprecated in favor of the Angular router, which is far more powerful. In today's video, you'll learn everything you need to know to be successful with the Angular router in Ionic 4, and I'll show you a few advanced techniques that you can start putting to use right away. If you're new here, like and subscribe, and you can find the source code at angularfirebase com. So prior to Ionic 4, the framework used its own built in nav controller and component to handle the navigation between pages in a push pop style way that you would see on a mobile application. I'd like to point out that the nav controller will still technically work in Ionic four, so you might see some tutorials out there on the web that use it. But it's not the preferred way to handle navigation and will likely not be possible in the future. I'm gonna go ahead and assume that you know nothing about the Angular router, so we'll start with the absolute basics and then build up to some pretty advanced concepts towards the end. And also make sure to watch my Angular Routing Basics video which is very relevant to the topic at hand here. And before we do anything, I wanna give you a pro tip, and that is to install the Augury plugin for Angular.
You can find it on the Chrome store, and it will you a ton by visualizing your actual router tree. So you can see here that everything kind of starts from the app component, then we have a couple of lazy loaded pages, and so on. This is a pretty basic setup here, but it becomes very valuable as your complexity grows.
google
I've gone ahead and generated a brand new Ionic four app that's using the tabs template. And when we open this application up, the first place we'll go is into the app directory and then open the app routing module. The only thing you'll ever really change in this file is the routes array which is an array of objects where you define the actual routes in your application. There are 3 basic types of routes that you can define. Your typical vanilla route would just be one that loads a component. Then in Ionic, we have lazy loaded routes which are automatically generated with the Ionic CLI as we'll see here in a minute. Then you might also set up a redirect to take one path and point it to some other path. If we look inside the app routing module here, you'll notice that it has the load children property that points to a different module in this app. That's an example of lazy loading which is a really important concept with Ionic. When you generate a page with the Ionic CLI, it will be lazy loaded by default. And what that means is it's using a feature from Webpack called code splitting. And the reason we lazy load things all comes down to performance for progressive web apps. This pattern allows us to split our code into smaller chunks, which will give us faster initial page load speeds on the web. So let's look at something a little more practical. Let's go ahead and generate a new page, and then we'll do some routing to and from that page. So I'll say Ionic generate page and I'll call this the animals page. Then you'll notice it sets up a new path in that routes array. Then it adds the load children property to point to the module that has that lazy loaded code. So that's going to render the animal's page component when the animal's path gets activated. But where does that page actually get displayed? Whenever a certain route is activated, it will render the page within a specific outlet. By default, you have this Ion router outlet inside the app component. So when we navigate to different pages or components, It will render that code specifically where this outlet lives. This Ion router outlet is specifically for Ionic, but it's just like the regular Angular router with additional internal things going on to handle the transition animations between pages. Now let's take a look at how we might navigate from our home page to the newly created animals page. And it's actually really simple. All we have to do is set up a button and give it an HREF attribute and then have it point to whatever path we defined. If you're familiar with the Angular router, you probably know that hrefs don't really work, and you need to use the router link directive. In Ionic, it works a little bit different. If you're defining the link on an actual Ionic component, it will intercept that link and use the Angular router as it should appropriately. And as far as I can tell, you can still use router link on non Ionic components without any drawbacks.
As you can see in our demo here, if we click on the animal's link, it will navigate to that page with a nice back and forth animation. But a lot of times in your app, you won't just be able to navigate with a basic link like this. You'll need to do it in a more programmatic kind of way.
animation
robotics
To demonstrate this, I'll create another Ionic button. But instead of using an hreflink, I'll go ahead and use a click event and handle it with a method inside of the component typescript. This will actually behave exactly like this HREF link, but we'll be handling everything from directly inside our component which gives us a lot more control to do things programmatically. Angular exposes the router to us as a service, which means we can inject it in the constructor and use it in any one of our components. There's a number of different things you can do with the router, But for now, we'll just use it to navigate from 1 URL to another. Once we have it injected, it's as easy as calling this dotrouter.navigate And then it expects an array where each item in that array is a URL segment. In this case, we just want to navigate to the animal's path, so we pass that in as the first item in the array. Then if we go into the demo, you can see it navigates and looks exactly like our previous link did.
But the important takeaway here is that you can access the router to navigate by whatever kind of code and logic that you want to write. And just another little Side note here, instead of navigate, you can call navigate by URL and pass in a URL string directly if that's easier for you. Now that we know how to move from one path to the next, let's go ahead and see how we can use dynamic data in our routes. A common use case here is when you have a database full of items and each of those items has an ID. You might start by showing a list, then the user navigates to a route that has a specific item ID in it. And then you pull that ID from the database and show its data in the UI. So we already have an animal's page. Let's go ahead and generate another component that's specifically for showing a specific animal ID assuming that we have that data in a database somewhere. One pro tip here is to nest your components inside of a lazy loaded page, And it will automatically add the route as a child route of that component and keep it lazy loaded, so it's performant within the app.
databases
data management
travel
data
roads
programming
So if we go into our animals module, you can see that it now has this profile component in there and we can create our own child routes for it. So the root path is just blank which would be animals because that was declared in the app routing module.
animals
livestock
Then if we want to route to a dynamic ID, we'll set up another path here where the path is colon ID and then it renders the profile component.
So it'll be the profile component's responsibility to check the ID and then pull the data from the database. Base. So now let's go ahead and route to this component just like we would with a regular HREF link. The path will be animals / whatever ID happens to be there.
databases
data management
In this case, I'll just pass in some random ID. If we route to this ID in the UI, you can see that it renders the profile component. And any URL that's in front of animals will render it, but it's still not very dynamic because we're not doing anything dynamic with the ID. To be able to extract the ID from the URL, we're going to use a service in Angular called ActivatedRoute. So we'll jump into our profile component. And then in the constructor, we'll inject activated route. We can get our parameters as a plain string or an observable if we care about future changes to it. For this example, we'll just go ahead and get it as a snapshot, which means we'll read it once when the component's initially rendered and we don't really care what happens to that value in the future. So we'll say this route snapshot dot parammapgitid. And just so we can visually verify this, I'll set up the ID as a property on the component. And then we'll display that in the UI and watch it update dynamically. If we go back to our demo now, you can see that every time we navigate to a different URL, we get a different ID displayed in the UI. So in other words, we're extracting data from the URL and using it in our actual application code. The next big topic I want to talk about is quite a bit more complex, but a lot of people have asked me how the new tabs template in Ionic 4 works. Even though the nav controller is deprecated, Ionic still supports a push pop style of navigation. But it does so using a thing called named outlets with the Angular router.
Earlier in the video, we looked at the Ionic router outlet. But what I haven't mentioned yet is that you can use multiple outlets within the same app. Basically, you can create secondary outlets that have that specific name and then render content within that secondary view based on a route change.
telecommunications
So in this case here, we have a path and an outlet. And if we look in the HTML, we can see that we have multiple router outlets on this page, each one with its own name property. The reason we have our routing set up this way for the tabs page is so that we can show the actual tab bar at the bottom of the view whenever a route is changed. The big thing to keep in mind is that if you wanna show the tab bar at the bottom, you want to route to one of the secondary outlets and not the root outlet.
The root outlet will take up the entire viewport while one of the secondary outlets will still show the tabs at the bottom. The final thing I wanna talk about in this video are Angular router guards. Guards are a special type of service in Angular that implement a method that can be understood by the router. In most cases, you'll implement the can activate method which returns a boolean that determines whether or not a route can be activated. I'd say the most common use case is when you have user authentication and you want to lock down certain routes based on the user's authentication state. When we generate a guard from the command line, it will generate a file that looks like this. And everything here is basically just boilerplate except that we want to implement this can activate method and have it return a Boolean or something that resolves to a Boolean like a Promise or an Observable.
security
programming
law enforcement
A common pattern I see is to inject the Angular router inside of a guard, then we can redirect the user if they're trying to access a route that they shouldn't be activating. To demonstrate how this works, I'm going to set up a Boolean variable here called logged in, and it will just have a 5050 chance of being true or false. If the user is not logged in, then we'll want to redirect them back to the root URL or maybe you wanna redirect them to a sign up page.
And then we'll return the boolean value from this method. If it's true, then the route will be activated. But if it's false, it will be blocked and the component will never get rendered. The great thing about guards is that we can write them once and then apply them to as many routes as we need. They provide really good code reusability. For example, we can go into our app routing module. And if we want to protect our animal's route, We can add the canActivate property and then add the auth guard to it. And you can even add multiple guards to a single route. If you watch closely here, I'm console logging the authentication state from our guard in the console, and you'll notice that when it's false, nothing will happen with the route change. But when it's true, it will actually navigate to the requested route.
security
weapons
law enforcement
military
In about a week, we'll expand on all these routing concepts with my new Ionic 4 Fire Base course where we'll build out a variety of different real world features that use these routing concepts.
If this video helped you, like and subscribe. And if you wanna get access to that course Free, consider upgrading to a Pro membership at angularfirebase.com. Not only will you get access to the upcoming course, but you'll also get access to a whole bunch of content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
youtube
software development
software
The single most important change in Ionic 4 is the way navigation works. If you're migrating from version 3, then you're probably familiar with Ionic's nav controller roller and the ion nav component, but they've been deprecated in favor of the Angular router, which is far more powerful. In today's video, you'll learn everything you need to know to be successful with the Angular router in Ionic 4, and I'll show you a few advanced techniques that you can start putting to use right away. If you're new here, like and subscribe, and you can find the source code at angularfirebase com. So prior to Ionic 4, the framework used its own built in nav controller and component to handle the navigation between pages in a push pop style way that you would see on a mobile application. I'd like to point out that the nav controller will still technically work in Ionic four, so you might see some tutorials out there on the web that use it. But it's not the preferred way to handle navigation and will likely not be possible in the future. I'm gonna go ahead and assume that you know nothing about the Angular router, so we'll start with the absolute basics and then build up to some pretty advanced concepts towards the end. And also make sure to watch my Angular Routing Basics video which is very relevant to the topic at hand here. And before we do anything, I wanna give you a pro tip, and that is to install the Augury plugin for Angular. You can find it on the Chrome store, and it will you a ton by visualizing your actual router tree. So you can see here that everything kind of starts from the app component, then we have a couple of lazy loaded pages, and so on. This is a pretty basic setup here, but it becomes very valuable as your complexity grows. I've gone ahead and generated a brand new Ionic four app that's using the tabs template. And when we open this application up, the first place we'll go is into the app directory and then open the app routing module. The only thing you'll ever really change in this file is the routes array which is an array of objects where you define the actual routes in your application. There are 3 basic types of routes that you can define. Your typical vanilla route would just be one that loads a component. Then in Ionic, we have lazy loaded routes which are automatically generated with the Ionic CLI as we'll see here in a minute. Then you might also set up a redirect to take one path and point it to some other path. If we look inside the app routing module here, you'll notice that it has the load children property that points to a different module in this app. That's an example of lazy loading which is a really important concept with Ionic. When you generate a page with the Ionic CLI, it will be lazy loaded by default. And what that means is it's using a feature from Webpack called code splitting. And the reason we lazy load things all comes down to performance for progressive web apps. This pattern allows us to split our code into smaller chunks, which will give us faster initial page load speeds on the web. So let's look at something a little more practical. Let's go ahead and generate a new page, and then we'll do some routing to and from that page. So I'll say Ionic generate page and I'll call this the animals page. Then you'll notice it sets up a new path in that routes array. Then it adds the load children property to point to the module that has that lazy loaded code. So that's going to render the animal's page component when the animal's path gets activated. But where does that page actually get displayed? Whenever a certain route is activated, it will render the page within a specific outlet. By default, you have this Ion router outlet inside the app component. So when we navigate to different pages or components, It will render that code specifically where this outlet lives. This Ion router outlet is specifically for Ionic, but it's just like the regular Angular router with additional internal things going on to handle the transition animations between pages. Now let's take a look at how we might navigate from our home page to the newly created animals page. And it's actually really simple. All we have to do is set up a button and give it an HREF attribute and then have it point to whatever path we defined. If you're familiar with the Angular router, you probably know that hrefs don't really work, and you need to use the router link directive. In Ionic, it works a little bit different. If you're defining the link on an actual Ionic component, it will intercept that link and use the Angular router as it should appropriately. And as far as I can tell, you can still use router link on non Ionic components without any drawbacks. As you can see in our demo here, if we click on the animal's link, it will navigate to that page with a nice back and forth animation. But a lot of times in your app, you won't just be able to navigate with a basic link like this. You'll need to do it in a more programmatic kind of way. To demonstrate this, I'll create another Ionic button. But instead of using an hreflink, I'll go ahead and use a click event and handle it with a method inside of the component typescript. This will actually behave exactly like this HREF link, but we'll be handling everything from directly inside our component which gives us a lot more control to do things programmatically. Angular exposes the router to us as a service, which means we can inject it in the constructor and use it in any one of our components. There's a number of different things you can do with the router, But for now, we'll just use it to navigate from 1 URL to another. Once we have it injected, it's as easy as calling this dotrouter.navigate And then it expects an array where each item in that array is a URL segment. In this case, we just want to navigate to the animal's path, so we pass that in as the first item in the array. Then if we go into the demo, you can see it navigates and looks exactly like our previous link did. But the important takeaway here is that you can access the router to navigate by whatever kind of code and logic that you want to write. And just another little Side note here, instead of navigate, you can call navigate by URL and pass in a URL string directly if that's easier for you. Now that we know how to move from one path to the next, let's go ahead and see how we can use dynamic data in our routes. A common use case here is when you have a database full of items and each of those items has an ID. You might start by showing a list, then the user navigates to a route that has a specific item ID in it. And then you pull that ID from the database and show its data in the UI. So we already have an animal's page. Let's go ahead and generate another component that's specifically for showing a specific animal ID assuming that we have that data in a database somewhere. One pro tip here is to nest your components inside of a lazy loaded page, And it will automatically add the route as a child route of that component and keep it lazy loaded, so it's performant within the app. So if we go into our animals module, you can see that it now has this profile component in there and we can create our own child routes for it. So the root path is just blank which would be animals because that was declared in the app routing module. Then if we want to route to a dynamic ID, we'll set up another path here where the path is colon ID and then it renders the profile component. So it'll be the profile component's responsibility to check the ID and then pull the data from the database. Base. So now let's go ahead and route to this component just like we would with a regular HREF link. The path will be animals / whatever ID happens to be there. In this case, I'll just pass in some random ID. If we route to this ID in the UI, you can see that it renders the profile component. And any URL that's in front of animals will render it, but it's still not very dynamic because we're not doing anything dynamic with the ID. To be able to extract the ID from the URL, we're going to use a service in Angular called ActivatedRoute. So we'll jump into our profile component. And then in the constructor, we'll inject activated route. We can get our parameters as a plain string or an observable if we care about future changes to it. For this example, we'll just go ahead and get it as a snapshot, which means we'll read it once when the component's initially rendered and we don't really care what happens to that value in the future. So we'll say this route snapshot dot parammapgitid. And just so we can visually verify this, I'll set up the ID as a property on the component. And then we'll display that in the UI and watch it update dynamically. If we go back to our demo now, you can see that every time we navigate to a different URL, we get a different ID displayed in the UI. So in other words, we're extracting data from the URL and using it in our actual application code. The next big topic I want to talk about is quite a bit more complex, but a lot of people have asked me how the new tabs template in Ionic 4 works. Even though the nav controller is deprecated, Ionic still supports a push pop style of navigation. But it does so using a thing called named outlets with the Angular router. Earlier in the video, we looked at the Ionic router outlet. But what I haven't mentioned yet is that you can use multiple outlets within the same app. Basically, you can create secondary outlets that have that specific name and then render content within that secondary view based on a route change. So in this case here, we have a path and an outlet. And if we look in the HTML, we can see that we have multiple router outlets on this page, each one with its own name property. The reason we have our routing set up this way for the tabs page is so that we can show the actual tab bar at the bottom of the view whenever a route is changed. The big thing to keep in mind is that if you wanna show the tab bar at the bottom, you want to route to one of the secondary outlets and not the root outlet. The root outlet will take up the entire viewport while one of the secondary outlets will still show the tabs at the bottom. The final thing I wanna talk about in this video are Angular router guards. Guards are a special type of service in Angular that implement a method that can be understood by the router. In most cases, you'll implement the can activate method which returns a boolean that determines whether or not a route can be activated. I'd say the most common use case is when you have user authentication and you want to lock down certain routes based on the user's authentication state. When we generate a guard from the command line, it will generate a file that looks like this. And everything here is basically just boilerplate except that we want to implement this can activate method and have it return a Boolean or something that resolves to a Boolean like a Promise or an Observable. A common pattern I see is to inject the Angular router inside of a guard, then we can redirect the user if they're trying to access a route that they shouldn't be activating. To demonstrate how this works, I'm going to set up a Boolean variable here called logged in, and it will just have a 5050 chance of being true or false. If the user is not logged in, then we'll want to redirect them back to the root URL or maybe you wanna redirect them to a sign up page. And then we'll return the boolean value from this method. If it's true, then the route will be activated. But if it's false, it will be blocked and the component will never get rendered. The great thing about guards is that we can write them once and then apply them to as many routes as we need. They provide really good code reusability. For example, we can go into our app routing module. And if we want to protect our animal's route, We can add the canActivate property and then add the auth guard to it. And you can even add multiple guards to a single route. If you watch closely here, I'm console logging the authentication state from our guard in the console, and you'll notice that when it's false, nothing will happen with the route change. But when it's true, it will actually navigate to the requested route. In about a week, we'll expand on all these routing concepts with my new Ionic 4 Fire Base course where we'll build out a variety of different real world features that use these routing concepts. If this video helped you, like and subscribe. And if you wanna get access to that course Free, consider upgrading to a Pro membership at angularfirebase.com. Not only will you get access to the upcoming course, but you'll also get access to a whole bunch of content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
The
the
single
single
most
most
important
important
change
change
in
in
Ionic
ionic
4
4
is
is
the
the
way
way
navigation
navigation
works.
works
If
if
you're
you're
migrating
migrating
from
from
version
version
3,
3
then
then
you're
you're
probably
probably
familiar
familiar
with
with
Ionic's
ionic's
nav
nav
controller
controller
roller
roller
and
and
the
the
ion
ion
nav
nav
component,
component
but
but
they've
they've
been
been
deprecated
deprecated
in
in
favor
favor
of
of
the
the
Angular
angular
router,
router
which
which
is
is
far
far
more
more
powerful.
powerful
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
everything
everything
you
you
need
need
to
to
know
know
to
to
be
be
successful
successful
with
with
the
the
Angular
angular
router
router
in
in
Ionic
ionic
4,
4
and
and
I'll
i'll
show
show
you
you
a
a
few
few
advanced
advanced
techniques
techniques
that
that
you
you
can
can
start
start
putting
putting
to
to
use
use
right
right
away.
away
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
find
find
the
the
source
source
code
code
at
at
angularfirebase
angularfirebase
com.
com
So
so
prior
prior
to
to
Ionic
ionic
4,
4
the
the
framework
framework
used
used
its
its
own
own
built
built
in
in
nav
nav
controller
controller
and
and
component
component
to
to
handle
handle
the
the
navigation
navigation
between
between
pages
pages
in
in
a
a
push
push
pop
pop
style
style
way
way
that
that
you
you
would
would
see
see
on
on
a
a
mobile
mobile
application.
application
I'd
i'd
like
like
to
to
point
point
out
out
that
that
the
the
nav
nav
controller
controller
will
will
still
still
technically
technically
work
work
in
in
Ionic
ionic
four,
four
so
so
you
you
might
might
see
see
some
some
tutorials
tutorials
out
out
there
there
on
on
the
the
web
web
that
that
use
use
it.
it
But
but
it's
it's
not
not
the
the
preferred
preferred
way
way
to
to
handle
handle
navigation
navigation
and
and
will
will
likely
likely
not
not
be
be
possible
possible
in
in
the
the
future.
future
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
assume
assume
that
that
you
you
know
know
nothing
nothing
about
about
the
the
Angular
angular
router,
router
so
so
we'll
we'll
start
start
with
with
the
the
absolute
absolute
basics
basics
and
and
then
then
build
build
up
up
to
to
some
some
pretty
pretty
advanced
advanced
concepts
concepts
towards
towards
the
the
end.
end
And
and
also
also
make
make
sure
sure
to
to
watch
watch
my
my
Angular
angular
Routing
routing
Basics
basics
video
video
which
which
is
is
very
very
relevant
relevant
to
to
the
the
topic
topic
at
at
hand
hand
here.
here
And
and
before
before
we
we
do
do
anything,
anything
I
i
wanna
wanna
give
give
you
you
a
a
pro
pro
tip,
tip
and
and
that
that
is
is
to
to
install
install
the
the
Augury
augury
plugin
plugin
for
for
Angular.
angular
You
you
can
can
find
find
it
it
on
on
the
the
Chrome
chrome
store,
store
and
and
it
it
will
will
you
you
a
a
ton
ton
by
by
visualizing
visualizing
your
your
actual
actual
router
router
tree.
tree
So
so
you
you
can
can
see
see
here
here
that
that
everything
everything
kind
kind
of
of
starts
starts
from
from
the
the
app
app
component,
component
then
then
we
we
have
have
a
a
couple
couple
of
of
lazy
lazy
loaded
loaded
pages,
pages
and
and
so
so
on.
on
This
this
is
is
a
a
pretty
pretty
basic
basic
setup
setup
here,
here
but
but
it
it
becomes
becomes
very
very
valuable
valuable
as
as
your
your
complexity
complexity
grows.
grows
I've
i've
gone
gone
ahead
ahead
and
and
generated
generated
a
a
brand
brand
new
new
Ionic
ionic
four
four
app
app
that's
that's
using
using
the
the
tabs
tabs
template.
template
And
and
when
when
we
we
open
open
this
this
application
application
up,
up
the
the
first
first
place
place
we'll
we'll
go
go
is
is
into
into
the
the
app
app
directory
directory
and
and
then
then
open
open
the
the
app
app
routing
routing
module.
module
The
the
only
only
thing
thing
you'll
you'll
ever
ever
really
really
change
change
in
in
this
this
file
file
is
is
the
the
routes
routes
array
array
which
which
is
is
an
an
array
array
of
of
objects
objects
where
where
you
you
define
define
the
the
actual
actual
routes
routes
in
in
your
your
application.
application
There
there
are
are
3
3
basic
basic
types
types
of
of
routes
routes
that
that
you
you
can
can
define.
define
Your
your
typical
typical
vanilla
vanilla
route
route
would
would
just
just
be
be
one
one
that
that
loads
loads
a
a
component.
component
Then
then
in
in
Ionic,
ionic
we
we
have
have
lazy
lazy
loaded
loaded
routes
routes
which
which
are
are
automatically
automatically
generated
generated
with
with
the
the
Ionic
ionic
CLI
cli
as
as
we'll
we'll
see
see
here
here
in
in
a
a
minute.
minute
Then
then
you
you
might
might
also
also
set
set
up
up
a
a
redirect
redirect
to
to
take
take
one
one
path
path
and
and
point
point
it
it
to
to
some
some
other
other
path.
path
If
if
we
we
look
look
inside
inside
the
the
app
app
routing
routing
module
module
here,
here
you'll
you'll
notice
notice
that
that
it
it
has
has
the
the
load
load
children
children
property
property
that
that
points
points
to
to
a
a
different
different
module
module
in
in
this
this
app.
app
That's
that's
an
an
example
example
of
of
lazy
lazy
loading
loading
which
which
is
is
a
a
really
really
important
important
concept
concept
with
with
Ionic.
ionic
When
when
you
you
generate
generate
a
a
page
page
with
with
the
the
Ionic
ionic
CLI,
cli
it
it
will
will
be
be
lazy
lazy
loaded
loaded
by
by
default.
default
And
and
what
what
that
that
means
means
is
is
it's
it's
using
using
a
a
feature
feature
from
from
Webpack
webpack
called
called
code
code
splitting.
splitting
And
and
the
the
reason
reason
we
we
lazy
lazy
load
load
things
things
all
all
comes
comes
down
down
to
to
performance
performance
for
for
progressive
progressive
web
web
apps.
apps
This
this
pattern
pattern
allows
allows
us
us
to
to
split
split
our
our
code
code
into
into
smaller
smaller
chunks,
chunks
which
which
will
will
give
give
us
us
faster
faster
initial
initial
page
page
load
load
speeds
speeds
on
on
the
the
web.
web
So
so
let's
let's
look
look
at
at
something
something
a
a
little
little
more
more
practical.
practical
Let's
let's
go
go
ahead
ahead
and
and
generate
generate
a
a
new
new
page,
page
and
and
then
then
we'll
we'll
do
do
some
some
routing
routing
to
to
and
and
from
from
that
that
page.
page
So
so
I'll
i'll
say
say
Ionic
ionic
generate
generate
page
page
and
and
I'll
i'll
call
call
this
this
the
the
animals
animals
page.
page
Then
then
you'll
you'll
notice
notice
it
it
sets
sets
up
up
a
a
new
new
path
path
in
in
that
that
routes
routes
array.
array
Then
then
it
it
adds
adds
the
the
load
load
children
children
property
property
to
to
point
point
to
to
the
the
module
module
that
that
has
has
that
that
lazy
lazy
loaded
loaded
code.
code
So
so
that's
that's
going
going
to
to
render
render
the
the
animal's
animal's
page
page
component
component
when
when
the
the
animal's
animal's
path
path
gets
gets
activated.
activated
But
but
where
where
does
does
that
that
page
page
actually
actually
get
get
displayed?
displayed
Whenever
whenever
a
a
certain
certain
route
route
is
is
activated,
activated
it
it
will
will
render
render
the
the
page
page
within
within
a
a
specific
specific
outlet.
outlet
By
by
default,
default
you
you
have
have
this
this
Ion
ion
router
router
outlet
outlet
inside
inside
the
the
app
app
component.
component
So
so
when
when
we
we
navigate
navigate
to
to
different
different
pages
pages
or
or
components,
components
It
it
will
will
render
render
that
that
code
code
specifically
specifically
where
where
this
this
outlet
outlet
lives.
lives
This
this
Ion
ion
router
router
outlet
outlet
is
is
specifically
specifically
for
for
Ionic,
ionic
but
but
it's
it's
just
just
like
like
the
the
regular
regular
Angular
angular
router
router
with
with
additional
additional
internal
internal
things
things
going
going
on
on
to
to
handle
handle
the
the
transition
transition
animations
animations
between
between
pages.
pages
Now
now
let's
let's
take
take
a
a
look
look
at
at
how
how
we
we
might
might
navigate
navigate
from
from
our
our
home
home
page
page
to
to
the
the
newly
newly
created
created
animals
animals
page.
page
And
and
it's
it's
actually
actually
really
really
simple.
simple
All
all
we
we
have
have
to
to
do
do
is
is
set
set
up
up
a
a
button
button
and
and
give
give
it
it
an
an
HREF
href
attribute
attribute
and
and
then
then
have
have
it
it
point
point
to
to
whatever
whatever
path
path
we
we
defined.
defined
If
if
you're
you're
familiar
familiar
with
with
the
the
Angular
angular
router,
router
you
you
probably
probably
know
know
that
that
hrefs
hrefs
don't
don't
really
really
work,
work
and
and
you
you
need
need
to
to
use
use
the
the
router
router
link
link
directive.
directive
In
in
Ionic,
ionic
it
it
works
works
a
a
little
little
bit
bit
different.
different
If
if
you're
you're
defining
defining
the
the
link
link
on
on
an
an
actual
actual
Ionic
ionic
component,
component
it
it
will
will
intercept
intercept
that
that
link
link
and
and
use
use
the
the
Angular
angular
router
router
as
as
it
it
should
should
appropriately.
appropriately
And
and
as
as
far
far
as
as
I
i
can
can
tell,
tell
you
you
can
can
still
still
use
use
router
router
link
link
on
on
non
non
Ionic
ionic
components
components
without
without
any
any
drawbacks.
drawbacks
As
as
you
you
can
can
see
see
in
in
our
our
demo
demo
here,
here
if
if
we
we
click
click
on
on
the
the
animal's
animal's
link,
link
it
it
will
will
navigate
navigate
to
to
that
that
page
page
with
with
a
a
nice
nice
back
back
and
and
forth
forth
animation.
animation
But
but
a
a
lot
lot
of
of
times
times
in
in
your
your
app,
app
you
you
won't
won't
just
just
be
be
able
able
to
to
navigate
navigate
with
with
a
a
basic
basic
link
link
like
like
this.
this
You'll
you'll
need
need
to
to
do
do
it
it
in
in
a
a
more
more
programmatic
programmatic
kind
kind
of
of
way.
way
To
to
demonstrate
demonstrate
this,
this
I'll
i'll
create
create
another
another
Ionic
ionic
button.
button
But
but
instead
instead
of
of
using
using
an
an
hreflink,
hreflink
I'll
i'll
go
go
ahead
ahead
and
and
use
use
a
a
click
click
event
event
and
and
handle
handle
it
it
with
with
a
a
method
method
inside
inside
of
of
the
the
component
component
typescript.
typescript
This
this
will
will
actually
actually
behave
behave
exactly
exactly
like
like
this
this
HREF
href
link,
link
but
but
we'll
we'll
be
be
handling
handling
everything
everything
from
from
directly
directly
inside
inside
our
our
component
component
which
which
gives
gives
us
us
a
a
lot
lot
more
more
control
control
to
to
do
do
things
things
programmatically.
programmatically
Angular
angular
exposes
exposes
the
the
router
router
to
to
us
us
as
as
a
a
service,
service
which
which
means
means
we
we
can
can
inject
inject
it
it
in
in
the
the
constructor
constructor
and
and
use
use
it
it
in
in
any
any
one
one
of
of
our
our
components.
components
There's
there's
a
a
number
number
of
of
different
different
things
things
you
you
can
can
do
do
with
with
the
the
router,
router
But
but
for
for
now,
now
we'll
we'll
just
just
use
use
it
it
to
to
navigate
navigate
from
from
1
1
URL
url
to
to
another.
another
Once
once
we
we
have
have
it
it
injected,
injected
it's
it's
as
as
easy
easy
as
as
calling
calling
this
this
dotrouter.navigate
dotrouter.navigate
And
and
then
then
it
it
expects
expects
an
an
array
array
where
where
each
each
item
item
in
in
that
that
array
array
is
is
a
a
URL
url
segment.
segment
In
in
this
this
case,
case
we
we
just
just
want
want
to
to
navigate
navigate
to
to
the
the
animal's
animal's
path,
path
so
so
we
we
pass
pass
that
that
in
in
as
as
the
the
first
first
item
item
in
in
the
the
array.
array
Then
then
if
if
we
we
go
go
into
into
the
the
demo,
demo
you
you
can
can
see
see
it
it
navigates
navigates
and
and
looks
looks
exactly
exactly
like
like
our
our
previous
previous
link
link
did.
did
But
but
the
the
important
important
takeaway
takeaway
here
here
is
is
that
that
you
you
can
can
access
access
the
the
router
router
to
to
navigate
navigate
by
by
whatever
whatever
kind
kind
of
of
code
code
and
and
logic
logic
that
that
you
you
want
want
to
to
write.
write
And
and
just
just
another
another
little
little
Side
side
note
note
here,
here
instead
instead
of
of
navigate,
navigate
you
you
can
can
call
call
navigate
navigate
by
by
URL
url
and
and
pass
pass
in
in
a
a
URL
url
string
string
directly
directly
if
if
that's
that's
easier
easier
for
for
you.
you
Now
now
that
that
we
we
know
know
how
how
to
to
move
move
from
from
one
one
path
path
to
to
the
the
next,
next
let's
let's
go
go
ahead
ahead
and
and
see
see
how
how
we
we
can
can
use
use
dynamic
dynamic
data
data
in
in
our
our
routes.
routes
A
a
common
common
use
use
case
case
here
here
is
is
when
when
you
you
have
have
a
a
database
database
full
full
of
of
items
items
and
and
each
each
of
of
those
those
items
items
has
has
an
an
ID.
id
You
you
might
might
start
start
by
by
showing
showing
a
a
list,
list
then
then
the
the
user
user
navigates
navigates
to
to
a
a
route
route
that
that
has
has
a
a
specific
specific
item
item
ID
id
in
in
it.
it
And
and
then
then
you
you
pull
pull
that
that
ID
id
from
from
the
the
database
database
and
and
show
show
its
its
data
data
in
in
the
the
UI.
ui
So
so
we
we
already
already
have
have
an
an
animal's
animal's
page.
page
Let's
let's
go
go
ahead
ahead
and
and
generate
generate
another
another
component
component
that's
that's
specifically
specifically
for
for
showing
showing
a
a
specific
specific
animal
animal
ID
id
assuming
assuming
that
that
we
we
have
have
that
that
data
data
in
in
a
a
database
database
somewhere.
somewhere
One
one
pro
pro
tip
tip
here
here
is
is
to
to
nest
nest
your
your
components
components
inside
inside
of
of
a
a
lazy
lazy
loaded
loaded
page,
page
And
and
it
it
will
will
automatically
automatically
add
add
the
the
route
route
as
as
a
a
child
child
route
route
of
of
that
that
component
component
and
and
keep
keep
it
it
lazy
lazy
loaded,
loaded
so
so
it's
it's
performant
performant
within
within
the
the
app.
app
So
so
if
if
we
we
go
go
into
into
our
our
animals
animals
module,
module
you
you
can
can
see
see
that
that
it
it
now
now
has
has
this
this
profile
profile
component
component
in
in
there
there
and
and
we
we
can
can
create
create
our
our
own
own
child
child
routes
routes
for
for
it.
it
So
so
the
the
root
root
path
path
is
is
just
just
blank
blank
which
which
would
would
be
be
animals
animals
because
because
that
that
was
was
declared
declared
in
in
the
the
app
app
routing
routing
module.
module
Then
then
if
if
we
we
want
want
to
to
route
route
to
to
a
a
dynamic
dynamic
ID,
id
we'll
we'll
set
set
up
up
another
another
path
path
here
here
where
where
the
the
path
path
is
is
colon
colon
ID
id
and
and
then
then
it
it
renders
renders
the
the
profile
profile
component.
component
So
so
it'll
it'll
be
be
the
the
profile
profile
component's
component's
responsibility
responsibility
to
to
check
check
the
the
ID
id
and
and
then
then
pull
pull
the
the
data
data
from
from
the
the
database.
database
Base.
base
So
so
now
now
let's
let's
go
go
ahead
ahead
and
and
route
route
to
to
this
this
component
component
just
just
like
like
we
we
would
would
with
with
a
a
regular
regular
HREF
href
link.
link
The
the
path
path
will
will
be
be
animals
animals
/
/
whatever
whatever
ID
id
happens
happens
to
to
be
be
there.
there
In
in
this
this
case,
case
I'll
i'll
just
just
pass
pass
in
in
some
some
random
random
ID.
id
If
if
we
we
route
route
to
to
this
this
ID
id
in
in
the
the
UI,
ui
you
you
can
can
see
see
that
that
it
it
renders
renders
the
the
profile
profile
component.
component
And
and
any
any
URL
url
that's
that's
in
in
front
front
of
of
animals
animals
will
will
render
render
it,
it
but
but
it's
it's
still
still
not
not
very
very
dynamic
dynamic
because
because
we're
we're
not
not
doing
doing
anything
anything
dynamic
dynamic
with
with
the
the
ID.
id
To
to
be
be
able
able
to
to
extract
extract
the
the
ID
id
from
from
the
the
URL,
url
we're
we're
going
going
to
to
use
use
a
a
service
service
in
in
Angular
angular
called
called
ActivatedRoute.
activatedroute
So
so
we'll
we'll
jump
jump
into
into
our
our
profile
profile
component.
component
And
and
then
then
in
in
the
the
constructor,
constructor
we'll
we'll
inject
inject
activated
activated
route.
route
We
we
can
can
get
get
our
our
parameters
parameters
as
as
a
a
plain
plain
string
string
or
or
an
an
observable
observable
if
if
we
we
care
care
about
about
future
future
changes
changes
to
to
it.
it
For
for
this
this
example,
example
we'll
we'll
just
just
go
go
ahead
ahead
and
and
get
get
it
it
as
as
a
a
snapshot,
snapshot
which
which
means
means
we'll
we'll
read
read
it
it
once
once
when
when
the
the
component's
component's
initially
initially
rendered
rendered
and
and
we
we
don't
don't
really
really
care
care
what
what
happens
happens
to
to
that
that
value
value
in
in
the
the
future.
future
So
so
we'll
we'll
say
say
this
this
route
route
snapshot
snapshot
dot
dot
parammapgitid.
parammapgitid
And
and
just
just
so
so
we
we
can
can
visually
visually
verify
verify
this,
this
I'll
i'll
set
set
up
up
the
the
ID
id
as
as
a
a
property
property
on
on
the
the
component.
component
And
and
then
then
we'll
we'll
display
display
that
that
in
in
the
the
UI
ui
and
and
watch
watch
it
it
update
update
dynamically.
dynamically
If
if
we
we
go
go
back
back
to
to
our
our
demo
demo
now,
now
you
you
can
can
see
see
that
that
every
every
time
time
we
we
navigate
navigate
to
to
a
a
different
different
URL,
url
we
we
get
get
a
a
different
different
ID
id
displayed
displayed
in
in
the
the
UI.
ui
So
so
in
in
other
other
words,
words
we're
we're
extracting
extracting
data
data
from
from
the
the
URL
url
and
and
using
using
it
it
in
in
our
our
actual
actual
application
application
code.
code
The
the
next
next
big
big
topic
topic
I
i
want
want
to
to
talk
talk
about
about
is
is
quite
quite
a
a
bit
bit
more
more
complex,
complex
but
but
a
a
lot
lot
of
of
people
people
have
have
asked
asked
me
me
how
how
the
the
new
new
tabs
tabs
template
template
in
in
Ionic
ionic
4
4
works.
works
Even
even
though
though
the
the
nav
nav
controller
controller
is
is
deprecated,
deprecated
Ionic
ionic
still
still
supports
supports
a
a
push
push
pop
pop
style
style
of
of
navigation.
navigation
But
but
it
it
does
does
so
so
using
using
a
a
thing
thing
called
called
named
named
outlets
outlets
with
with
the
the
Angular
angular
router.
router
Earlier
earlier
in
in
the
the
video,
video
we
we
looked
looked
at
at
the
the
Ionic
ionic
router
router
outlet.
outlet
But
but
what
what
I
i
haven't
haven't
mentioned
mentioned
yet
yet
is
is
that
that
you
you
can
can
use
use
multiple
multiple
outlets
outlets
within
within
the
the
same
same
app.
app
Basically,
basically
you
you
can
can
create
create
secondary
secondary
outlets
outlets
that
that
have
have
that
that
specific
specific
name
name
and
and
then
then
render
render
content
content
within
within
that
that
secondary
secondary
view
view
based
based
on
on
a
a
route
route
change.
change
So
so
in
in
this
this
case
case
here,
here
we
we
have
have
a
a
path
path
and
and
an
an
outlet.
outlet
And
and
if
if
we
we
look
look
in
in
the
the
HTML,
html
we
we
can
can
see
see
that
that
we
we
have
have
multiple
multiple
router
router
outlets
outlets
on
on
this
this
page,
page
each
each
one
one
with
with
its
its
own
own
name
name
property.
property
The
the
reason
reason
we
we
have
have
our
our
routing
routing
set
set
up
up
this
this
way
way
for
for
the
the
tabs
tabs
page
page
is
is
so
so
that
that
we
we
can
can
show
show
the
the
actual
actual
tab
tab
bar
bar
at
at
the
the
bottom
bottom
of
of
the
the
view
view
whenever
whenever
a
a
route
route
is
is
changed.
changed
The
the
big
big
thing
thing
to
to
keep
keep
in
in
mind
mind
is
is
that
that
if
if
you
you
wanna
wanna
show
show
the
the
tab
tab
bar
bar
at
at
the
the
bottom,
bottom
you
you
want
want
to
to
route
route
to
to
one
one
of
of
the
the
secondary
secondary
outlets
outlets
and
and
not
not
the
the
root
root
outlet.
outlet
The
the
root
root
outlet
outlet
will
will
take
take
up
up
the
the
entire
entire
viewport
viewport
while
while
one
one
of
of
the
the
secondary
secondary
outlets
outlets
will
will
still
still
show
show
the
the
tabs
tabs
at
at
the
the
bottom.
bottom
The
the
final
final
thing
thing
I
i
wanna
wanna
talk
talk
about
about
in
in
this
this
video
video
are
are
Angular
angular
router
router
guards.
guards
Guards
guards
are
are
a
a
special
special
type
type
of
of
service
service
in
in
Angular
angular
that
that
implement
implement
a
a
method
method
that
that
can
can
be
be
understood
understood
by
by
the
the
router.
router
In
in
most
most
cases,
cases
you'll
you'll
implement
implement
the
the
can
can
activate
activate
method
method
which
which
returns
returns
a
a
boolean
boolean
that
that
determines
determines
whether
whether
or
or
not
not
a
a
route
route
can
can
be
be
activated.
activated
I'd
i'd
say
say
the
the
most
most
common
common
use
use
case
case
is
is
when
when
you
you
have
have
user
user
authentication
authentication
and
and
you
you
want
want
to
to
lock
lock
down
down
certain
certain
routes
routes
based
based
on
on
the
the
user's
user's
authentication
authentication
state.
state
When
when
we
we
generate
generate
a
a
guard
guard
from
from
the
the
command
command
line,
line
it
it
will
will
generate
generate
a
a
file
file
that
that
looks
looks
like
like
this.
this
And
and
everything
everything
here
here
is
is
basically
basically
just
just
boilerplate
boilerplate
except
except
that
that
we
we
want
want
to
to
implement
implement
this
this
can
can
activate
activate
method
method
and
and
have
have
it
it
return
return
a
a
Boolean
boolean
or
or
something
something
that
that
resolves
resolves
to
to
a
a
Boolean
boolean
like
like
a
a
Promise
promise
or
or
an
an
Observable.
observable
A
a
common
common
pattern
pattern
I
i
see
see
is
is
to
to
inject
inject
the
the
Angular
angular
router
router
inside
inside
of
of
a
a
guard,
guard
then
then
we
we
can
can
redirect
redirect
the
the
user
user
if
if
they're
they're
trying
trying
to
to
access
access
a
a
route
route
that
that
they
they
shouldn't
shouldn't
be
be
activating.
activating
To
to
demonstrate
demonstrate
how
how
this
this
works,
works
I'm
i'm
going
going
to
to
set
set
up
up
a
a
Boolean
boolean
variable
variable
here
here
called
called
logged
logged
in,
in
and
and
it
it
will
will
just
just
have
have
a
a
5050
5050
chance
chance
of
of
being
being
true
true
or
or
false.
false
If
if
the
the
user
user
is
is
not
not
logged
logged
in,
in
then
then
we'll
we'll
want
want
to
to
redirect
redirect
them
them
back
back
to
to
the
the
root
root
URL
url
or
or
maybe
maybe
you
you
wanna
wanna
redirect
redirect
them
them
to
to
a
a
sign
sign
up
up
page.
page
And
and
then
then
we'll
we'll
return
return
the
the
boolean
boolean
value
value
from
from
this
this
method.
method
If
if
it's
it's
true,
true
then
then
the
the
route
route
will
will
be
be
activated.
activated
But
but
if
if
it's
it's
false,
false
it
it
will
will
be
be
blocked
blocked
and
and
the
the
component
component
will
will
never
never
get
get
rendered.
rendered
The
the
great
great
thing
thing
about
about
guards
guards
is
is
that
that
we
we
can
can
write
write
them
them
once
once
and
and
then
then
apply
apply
them
them
to
to
as
as
many
many
routes
routes
as
as
we
we
need.
need
They
they
provide
provide
really
really
good
good
code
code
reusability.
reusability
For
for
example,
example
we
we
can
can
go
go
into
into
our
our
app
app
routing
routing
module.
module
And
and
if
if
we
we
want
want
to
to
protect
protect
our
our
animal's
animal's
route,
route
We
we
can
can
add
add
the
the
canActivate
canactivate
property
property
and
and
then
then
add
add
the
the
auth
auth
guard
guard
to
to
it.
it
And
and
you
you
can
can
even
even
add
add
multiple
multiple
guards
guards
to
to
a
a
single
single
route.
route
If
if
you
you
watch
watch
closely
closely
here,
here
I'm
i'm
console
console
logging
logging
the
the
authentication
authentication
state
state
from
from
our
our
guard
guard
in
in
the
the
console,
console
and
and
you'll
you'll
notice
notice
that
that
when
when
it's
it's
false,
false
nothing
nothing
will
will
happen
happen
with
with
the
the
route
route
change.
change
But
but
when
when
it's
it's
true,
true
it
it
will
will
actually
actually
navigate
navigate
to
to
the
the
requested
requested
route.
route
In
in
about
about
a
a
week,
week
we'll
we'll
expand
expand
on
on
all
all
these
these
routing
routing
concepts
concepts
with
with
my
my
new
new
Ionic
ionic
4
4
Fire
fire
Base
base
course
course
where
where
we'll
we'll
build
build
out
out
a
a
variety
variety
of
of
different
different
real
real
world
world
features
features
that
that
use
use
these
these
routing
routing
concepts.
concepts
If
if
this
this
video
video
helped
helped
you,
you
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
get
get
access
access
to
to
that
that
course
course
Free,
free
consider
consider
upgrading
upgrading
to
to
a
a
Pro
pro
membership
membership
at
at
angularfirebase.com.
angularfirebase.com
Not
not
only
only
will
will
you
you
get
get
access
access
to
to
the
the
upcoming
upcoming
course,
course
but
but
you'll
you'll
also
also
get
get
access
access
to
to
a
a
whole
whole
bunch
bunch
of
of
content
content
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The use of navigation in Ionic 4 is still possible, but the navigation between pages is not possible in the future. The speaker gives tip on installing the Augury plugin for Angular and demonstrates how to navigate from one page to the next in the app. They also explain how to use dynamic data in routes array and how to use the new tabs template in Ionic. The speaker explains how to extract data from a URL and use it in the app code, introduces a new course on creating a web page, and discusses the need for a can confident method to handle route changes.
Ionic 4 - Routing and Navigation Guide
The single most important change in Ionic 4 is the way navigation works. If you're migrating from version 3, then you're probably familiar with Ionic's nav controller roller and the ion nav component, but they've been deprecated in favor of the Angular router, which is far more powerful. In today's video, you'll learn everything you need to know to be successful with the Angular router in Ionic 4, and I'll show you a few advanced techniques that you can start putting to use right away. If you're new here, like and subscribe, and you can find the source code at angularfirebase com. So prior to Ionic 4, the framework used its own built in nav controller and component to handle the navigation between pages in a push pop style way that you would see on a mobile application. I'd like to point out that the nav controller will still technically work in Ionic four, so you might see some tutorials out there on the web that use it. But it's not the preferred way to handle navigation and will likely not be possible in the future. I'm gonna go ahead and assume that you know nothing about the Angular router, so we'll start with the absolute basics and then build up to some pretty advanced concepts towards the end. And also make sure to watch my Angular Routing Basics video which is very relevant to the topic at hand here. And before we do anything, I wanna give you a pro tip, and that is to install the Augury plugin for Angular. You can find it on the Chrome store, and it will you a ton by visualizing your actual router tree. So you can see here that everything kind of starts from the app component, then we have a couple of lazy loaded pages, and so on. This is a pretty basic setup here, but it becomes very valuable as your complexity grows. I've gone ahead and generated a brand new Ionic four app that's using the tabs template. And when we open this application up, the first place we'll go is into the app directory and then open the app routing module. The only thing you'll ever really change in this file is the routes array which is an array of objects where you define the actual routes in your application. There are 3 basic types of routes that you can define. Your typical vanilla route would just be one that loads a component. Then in Ionic, we have lazy loaded routes which are automatically generated with the Ionic CLI as we'll see here in a minute. Then you might also set up a redirect to take one path and point it to some other path. If we look inside the app routing module here, you'll notice that it has the load children property that points to a different module in this app. That's an example of lazy loading which is a really important concept with Ionic. When you generate a page with the Ionic CLI, it will be lazy loaded by default. And what that means is it's using a feature from Webpack called code splitting. And the reason we lazy load things all comes down to performance for progressive web apps. This pattern allows us to split our code into smaller chunks, which will give us faster initial page load speeds on the web. So let's look at something a little more practical. Let's go ahead and generate a new page, and then we'll do some routing to and from that page. So I'll say Ionic generate page and I'll call this the animals page. Then you'll notice it sets up a new path in that routes array. Then it adds the load children property to point to the module that has that lazy loaded code. So that's going to render the animal's page component when the animal's path gets activated. But where does that page actually get displayed? Whenever a certain route is activated, it will render the page within a specific outlet. By default, you have this Ion router outlet inside the app component. So when we navigate to different pages or components, It will render that code specifically where this outlet lives. This Ion router outlet is specifically for Ionic, but it's just like the regular Angular router with additional internal things going on to handle the transition animations between pages. Now let's take a look at how we might navigate from our home page to the newly created animals page. And it's actually really simple. All we have to do is set up a button and give it an HREF attribute and then have it point to whatever path we defined. If you're familiar with the Angular router, you probably know that hrefs don't really work, and you need to use the router link directive. In Ionic, it works a little bit different. If you're defining the link on an actual Ionic component, it will intercept that link and use the Angular router as it should appropriately. And as far as I can tell, you can still use router link on non Ionic components without any drawbacks. As you can see in our demo here, if we click on the animal's link, it will navigate to that page with a nice back and forth animation. But a lot of times in your app, you won't just be able to navigate with a basic link like this. You'll need to do it in a more programmatic kind of way. To demonstrate this, I'll create another Ionic button. But instead of using an hreflink, I'll go ahead and use a click event and handle it with a method inside of the component typescript. This will actually behave exactly like this HREF link, but we'll be handling everything from directly inside our component which gives us a lot more control to do things programmatically. Angular exposes the router to us as a service, which means we can inject it in the constructor and use it in any one of our components. There's a number of different things you can do with the router, But for now, we'll just use it to navigate from 1 URL to another. Once we have it injected, it's as easy as calling this dotrouter.navigate And then it expects an array where each item in that array is a URL segment. In this case, we just want to navigate to the animal's path, so we pass that in as the first item in the array. Then if we go into the demo, you can see it navigates and looks exactly like our previous link did. But the important takeaway here is that you can access the router to navigate by whatever kind of code and logic that you want to write. And just another little Side note here, instead of navigate, you can call navigate by URL and pass in a URL string directly if that's easier for you. Now that we know how to move from one path to the next, let's go ahead and see how we can use dynamic data in our routes. A common use case here is when you have a database full of items and each of those items has an ID. You might start by showing a list, then the user navigates to a route that has a specific item ID in it. And then you pull that ID from the database and show its data in the UI. So we already have an animal's page. Let's go ahead and generate another component that's specifically for showing a specific animal ID assuming that we have that data in a database somewhere. One pro tip here is to nest your components inside of a lazy loaded page, And it will automatically add the route as a child route of that component and keep it lazy loaded, so it's performant within the app. So if we go into our animals module, you can see that it now has this profile component in there and we can create our own child routes for it. So the root path is just blank which would be animals because that was declared in the app routing module. Then if we want to route to a dynamic ID, we'll set up another path here where the path is colon ID and then it renders the profile component. So it'll be the profile component's responsibility to check the ID and then pull the data from the database. Base. So now let's go ahead and route to this component just like we would with a regular HREF link. The path will be animals / whatever ID happens to be there. In this case, I'll just pass in some random ID. If we route to this ID in the UI, you can see that it renders the profile component. And any URL that's in front of animals will render it, but it's still not very dynamic because we're not doing anything dynamic with the ID. To be able to extract the ID from the URL, we're going to use a service in Angular called ActivatedRoute. So we'll jump into our profile component. And then in the constructor, we'll inject activated route. We can get our parameters as a plain string or an observable if we care about future changes to it. For this example, we'll just go ahead and get it as a snapshot, which means we'll read it once when the component's initially rendered and we don't really care what happens to that value in the future. So we'll say this route snapshot dot parammapgitid. And just so we can visually verify this, I'll set up the ID as a property on the component. And then we'll display that in the UI and watch it update dynamically. If we go back to our demo now, you can see that every time we navigate to a different URL, we get a different ID displayed in the UI. So in other words, we're extracting data from the URL and using it in our actual application code. The next big topic I want to talk about is quite a bit more complex, but a lot of people have asked me how the new tabs template in Ionic 4 works. Even though the nav controller is deprecated, Ionic still supports a push pop style of navigation. But it does so using a thing called named outlets with the Angular router. Earlier in the video, we looked at the Ionic router outlet. But what I haven't mentioned yet is that you can use multiple outlets within the same app. Basically, you can create secondary outlets that have that specific name and then render content within that secondary view based on a route change. So in this case here, we have a path and an outlet. And if we look in the HTML, we can see that we have multiple router outlets on this page, each one with its own name property. The reason we have our routing set up this way for the tabs page is so that we can show the actual tab bar at the bottom of the view whenever a route is changed. The big thing to keep in mind is that if you wanna show the tab bar at the bottom, you want to route to one of the secondary outlets and not the root outlet. The root outlet will take up the entire viewport while one of the secondary outlets will still show the tabs at the bottom. The final thing I wanna talk about in this video are Angular router guards. Guards are a special type of service in Angular that implement a method that can be understood by the router. In most cases, you'll implement the can activate method which returns a boolean that determines whether or not a route can be activated. I'd say the most common use case is when you have user authentication and you want to lock down certain routes based on the user's authentication state. When we generate a guard from the command line, it will generate a file that looks like this. And everything here is basically just boilerplate except that we want to implement this can activate method and have it return a Boolean or something that resolves to a Boolean like a Promise or an Observable. A common pattern I see is to inject the Angular router inside of a guard, then we can redirect the user if they're trying to access a route that they shouldn't be activating. To demonstrate how this works, I'm going to set up a Boolean variable here called logged in, and it will just have a 5050 chance of being true or false. If the user is not logged in, then we'll want to redirect them back to the root URL or maybe you wanna redirect them to a sign up page. And then we'll return the boolean value from this method. If it's true, then the route will be activated. But if it's false, it will be blocked and the component will never get rendered. The great thing about guards is that we can write them once and then apply them to as many routes as we need. They provide really good code reusability. For example, we can go into our app routing module. And if we want to protect our animal's route, We can add the canActivate property and then add the auth guard to it. And you can even add multiple guards to a single route. If you watch closely here, I'm console logging the authentication state from our guard in the console, and you'll notice that when it's false, nothing will happen with the route change. But when it's true, it will actually navigate to the requested route. In about a week, we'll expand on all these routing concepts with my new Ionic 4 Fire Base course where we'll build out a variety of different real world features that use these routing concepts. If this video helped you, like and subscribe. And if you wanna get access to that course Free, consider upgrading to a Pro membership at angularfirebase.com. Not only will you get access to the upcoming course, but you'll also get access to a whole bunch of content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
The use of navigation in Ionic 4 is still possible, but the navigation between pages is not possible in the future. The speaker gives tip on installing the Augury plugin for Angular and demonstrates how to navigate from one page to the next in the app. They also explain how to use dynamic data in routes array and how to use the new tabs template in Ionic. The speaker explains how to extract data from a URL and use it in the app code, introduces a new course on creating a web page, and discusses the need for a can confident method to handle route changes.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Ionic 4 - Routing and Navigation Guide 
        and a small summary : The use of navigation in Ionic 4 is still possible, but the navigation between pages is not possible in the future. The speaker gives tip on installing the Augury plugin for Angular and demonstrates how to navigate from one page to the next in the app. They also explain how to use dynamic data in routes array and how to use the new tabs template in Ionic. The speaker explains how to extract data from a URL and use it in the app code, introduces a new course on creating a web page, and discusses the need for a can confident method to handle route changes.
        [/INST]
        
        Generate the video : The single most important change in Ionic 4 is the way navigation works. If you're migrating from version 3, then you're probably familiar with Ionic's nav controller roller and the ion nav component, but they've been deprecated in favor of the Angular router, which is far more powerful. In today's video, you'll learn everything you need to know to be successful with the Angular router in Ionic 4, and I'll show you a few advanced techniques that you can start putting to use right away. If you're new here, like and subscribe, and you can find the source code at angularfirebase com. So prior to Ionic 4, the framework used its own built in nav controller and component to handle the navigation between pages in a push pop style way that you would see on a mobile application. I'd like to point out that the nav controller will still technically work in Ionic four, so you might see some tutorials out there on the web that use it. But it's not the preferred way to handle navigation and will likely not be possible in the future. I'm gonna go ahead and assume that you know nothing about the Angular router, so we'll start with the absolute basics and then build up to some pretty advanced concepts towards the end. And also make sure to watch my Angular Routing Basics video which is very relevant to the topic at hand here. And before we do anything, I wanna give you a pro tip, and that is to install the Augury plugin for Angular. You can find it on the Chrome store, and it will you a ton by visualizing your actual router tree. So you can see here that everything kind of starts from the app component, then we have a couple of lazy loaded pages, and so on. This is a pretty basic setup here, but it becomes very valuable as your complexity grows. I've gone ahead and generated a brand new Ionic four app that's using the tabs template. And when we open this application up, the first place we'll go is into the app directory and then open the app routing module. The only thing you'll ever really change in this file is the routes array which is an array of objects where you define the actual routes in your application. There are 3 basic types of routes that you can define. Your typical vanilla route would just be one that loads a component. Then in Ionic, we have lazy loaded routes which are automatically generated with the Ionic CLI as we'll see here in a minute. Then you might also set up a redirect to take one path and point it to some other path. If we look inside the app routing module here, you'll notice that it has the load children property that points to a different module in this app. That's an example of lazy loading which is a really important concept with Ionic. When you generate a page with the Ionic CLI, it will be lazy loaded by default. And what that means is it's using a feature from Webpack called code splitting. And the reason we lazy load things all comes down to performance for progressive web apps. This pattern allows us to split our code into smaller chunks, which will give us faster initial page load speeds on the web. So let's look at something a little more practical. Let's go ahead and generate a new page, and then we'll do some routing to and from that page. So I'll say Ionic generate page and I'll call this the animals page. Then you'll notice it sets up a new path in that routes array. Then it adds the load children property to point to the module that has that lazy loaded code. So that's going to render the animal's page component when the animal's path gets activated. But where does that page actually get displayed? Whenever a certain route is activated, it will render the page within a specific outlet. By default, you have this Ion router outlet inside the app component. So when we navigate to different pages or components, It will render that code specifically where this outlet lives. This Ion router outlet is specifically for Ionic, but it's just like the regular Angular router with additional internal things going on to handle the transition animations between pages. Now let's take a look at how we might navigate from our home page to the newly created animals page. And it's actually really simple. All we have to do is set up a button and give it an HREF attribute and then have it point to whatever path we defined. If you're familiar with the Angular router, you probably know that hrefs don't really work, and you need to use the router link directive. In Ionic, it works a little bit different. If you're defining the link on an actual Ionic component, it will intercept that link and use the Angular router as it should appropriately. And as far as I can tell, you can still use router link on non Ionic components without any drawbacks. As you can see in our demo here, if we click on the animal's link, it will navigate to that page with a nice back and forth animation. But a lot of times in your app, you won't just be able to navigate with a basic link like this. You'll need to do it in a more programmatic kind of way. To demonstrate this, I'll create another Ionic button. But instead of using an hreflink, I'll go ahead and use a click event and handle it with a method inside of the component typescript. This will actually behave exactly like this HREF link, but we'll be handling everything from directly inside our component which gives us a lot more control to do things programmatically. Angular exposes the router to us as a service, which means we can inject it in the constructor and use it in any one of our components. There's a number of different things you can do with the router, But for now, we'll just use it to navigate from 1 URL to another. Once we have it injected, it's as easy as calling this dotrouter.navigate And then it expects an array where each item in that array is a URL segment. In this case, we just want to navigate to the animal's path, so we pass that in as the first item in the array. Then if we go into the demo, you can see it navigates and looks exactly like our previous link did. But the important takeaway here is that you can access the router to navigate by whatever kind of code and logic that you want to write. And just another little Side note here, instead of navigate, you can call navigate by URL and pass in a URL string directly if that's easier for you. Now that we know how to move from one path to the next, let's go ahead and see how we can use dynamic data in our routes. A common use case here is when you have a database full of items and each of those items has an ID. You might start by showing a list, then the user navigates to a route that has a specific item ID in it. And then you pull that ID from the database and show its data in the UI. So we already have an animal's page. Let's go ahead and generate another component that's specifically for showing a specific animal ID assuming that we have that data in a database somewhere. One pro tip here is to nest your components inside of a lazy loaded page, And it will automatically add the route as a child route of that component and keep it lazy loaded, so it's performant within the app. So if we go into our animals module, you can see that it now has this profile component in there and we can create our own child routes for it. So the root path is just blank which would be animals because that was declared in the app routing module. Then if we want to route to a dynamic ID, we'll set up another path here where the path is colon ID and then it renders the profile component. So it'll be the profile component's responsibility to check the ID and then pull the data from the database. Base. So now let's go ahead and route to this component just like we would with a regular HREF link. The path will be animals / whatever ID happens to be there. In this case, I'll just pass in some random ID. If we route to this ID in the UI, you can see that it renders the profile component. And any URL that's in front of animals will render it, but it's still not very dynamic because we're not doing anything dynamic with the ID. To be able to extract the ID from the URL, we're going to use a service in Angular called ActivatedRoute. So we'll jump into our profile component. And then in the constructor, we'll inject activated route. We can get our parameters as a plain string or an observable if we care about future changes to it. For this example, we'll just go ahead and get it as a snapshot, which means we'll read it once when the component's initially rendered and we don't really care what happens to that value in the future. So we'll say this route snapshot dot parammapgitid. And just so we can visually verify this, I'll set up the ID as a property on the component. And then we'll display that in the UI and watch it update dynamically. If we go back to our demo now, you can see that every time we navigate to a different URL, we get a different ID displayed in the UI. So in other words, we're extracting data from the URL and using it in our actual application code. The next big topic I want to talk about is quite a bit more complex, but a lot of people have asked me how the new tabs template in Ionic 4 works. Even though the nav controller is deprecated, Ionic still supports a push pop style of navigation. But it does so using a thing called named outlets with the Angular router. Earlier in the video, we looked at the Ionic router outlet. But what I haven't mentioned yet is that you can use multiple outlets within the same app. Basically, you can create secondary outlets that have that specific name and then render content within that secondary view based on a route change. So in this case here, we have a path and an outlet. And if we look in the HTML, we can see that we have multiple router outlets on this page, each one with its own name property. The reason we have our routing set up this way for the tabs page is so that we can show the actual tab bar at the bottom of the view whenever a route is changed. The big thing to keep in mind is that if you wanna show the tab bar at the bottom, you want to route to one of the secondary outlets and not the root outlet. The root outlet will take up the entire viewport while one of the secondary outlets will still show the tabs at the bottom. The final thing I wanna talk about in this video are Angular router guards. Guards are a special type of service in Angular that implement a method that can be understood by the router. In most cases, you'll implement the can activate method which returns a boolean that determines whether or not a route can be activated. I'd say the most common use case is when you have user authentication and you want to lock down certain routes based on the user's authentication state. When we generate a guard from the command line, it will generate a file that looks like this. And everything here is basically just boilerplate except that we want to implement this can activate method and have it return a Boolean or something that resolves to a Boolean like a Promise or an Observable. A common pattern I see is to inject the Angular router inside of a guard, then we can redirect the user if they're trying to access a route that they shouldn't be activating. To demonstrate how this works, I'm going to set up a Boolean variable here called logged in, and it will just have a 5050 chance of being true or false. If the user is not logged in, then we'll want to redirect them back to the root URL or maybe you wanna redirect them to a sign up page. And then we'll return the boolean value from this method. If it's true, then the route will be activated. But if it's false, it will be blocked and the component will never get rendered. The great thing about guards is that we can write them once and then apply them to as many routes as we need. They provide really good code reusability. For example, we can go into our app routing module. And if we want to protect our animal's route, We can add the canActivate property and then add the auth guard to it. And you can even add multiple guards to a single route. If you watch closely here, I'm console logging the authentication state from our guard in the console, and you'll notice that when it's false, nothing will happen with the route change. But when it's true, it will actually navigate to the requested route. In about a week, we'll expand on all these routing concepts with my new Ionic 4 Fire Base course where we'll build out a variety of different real world features that use these routing concepts. If this video helped you, like and subscribe. And if you wanna get access to that course Free, consider upgrading to a Pro membership at angularfirebase.com. Not only will you get access to the upcoming course, but you'll also get access to a whole bunch of content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
        