This course has been updated! We now recommend you take the Angular 13 Fundamentals course.

Check out a free preview of the full Angular 9 Fundamentals course:
The "Routing to Components" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas explains how to route to a specific component and render that component in an outlet based on the route. An outlet activates an event when a new component is instantiated.

Get Unlimited Access Now

Transcript from the "Routing to Components" Lesson

>> Now one thing I'm going to show you here, we'll hop back into the code, is there's another bit of I think of sugar that you can use here, and that's router, LinkActive. Click on this, and what this does is, when you are on an active router link, it will detect that and attach a class to it.

[00:00:31] So we'll go back here, and if we go to courses again, we can inspect this again, and let me just close this. You can see here that if we follow this through on the class, there is the active class. So if I hopped into CSS, I could say, for this, let's style this just a little bit different.

[00:00:55] And so, if you want to delineate, I'm on this particular route or this button that's attached to this route, you can do routerLinkActive. And then attach that class that you wanna use to style that particular element. And so now that we've done that, We're basically just navigating from one link to another.

[00:01:26] Let's go back and let's look at the routing table itself. So this was generated in the starting branch, but let's just do a quick review. And then we'll go and we'll extend upon this with a lazy loading route, so, When you set up your routing table, typically, kind of best practice is to have a separate routing module for your route.

[00:01:54] So what that does is, that kind of is a standalone module that contains just the routing table, and all the functionality for the route. So that's a good separation of concerns. Within that, you declare your route table, which is nothing more than an array of route objects. And so if we click on this, you can kinda step into this interface, and kinda poke around and see what is available.

[00:02:27] I'm not gonna get too much into that. But I think the two things that are the most basic piece of a route is the path and the component. And so for the home path, we're attaching the home component. For the courses path, we're attaching the courses component, which goes into the router outlet.

[00:02:55] Now, let's talk about this route here at the bottom, and so this is a wildcard route. And what this does is, if I were to go and just put any route in there and it doesn't match up, what it's going to do is, it's gonna say, I don't recognize this route, I'm just going to redirect to home.

[00:03:19] And so this is a way to essentially ensure kind of some route safety around your route, so somebody doesn't end up in a broken state in your application. The other thing that is worth mentioning on the route table is that the order of the routes in the array matters.

[00:03:40] And so for instance, I've had essentially route conflicts because I put a very specific route in the wrong order in relation to a general route. And it was triggering the first route before it could trigger the route that I actually wanted to go to. So if you find that you're trying to route to a particular route, and it's going to a similar route, but not where you wanna go, one thing that you can check, because route does order, it's just gonna parse it down, top to bottom, is that you may need to reorder your route.

[00:04:18] So for instance, if you wanna have a route param, you wanna say, I wanna route to this specific course, I would put that underneath the the general courses route. And so just to point that out, if you start to see kind of that behavior, it's possible that your routing order is not correct.

[00:04:40] And a route is being triggered before the route that you actually wanna go to.