Transcript from the "Route Params" Lesson
[00:00:00]
>> Now that we've talked about child routes, let's talk about route params. And so this is a fairly familiar concept, especially if you've done anything with a RESTful web service or RESTful API. Is that you have a collection, which then you can hit from courses or lessons. And so you kind of have that portion of the URL, and then forward slash, and then you have some ID that says, within this collection, I wanna get this single thing.
[00:00:31] And so the question is, how do we get route params in Angular? How does that work? And so we have a route params example that we're going to build out. And so the first thing we're going to do is we're going to hop inside of our app routing module, and we're going to add in a new route.
[00:00:59] So just underneath of the child routes here, we are going to add in actually two routes. And so the first one is going to be a params route. So path, params, and the component is going to be the RouteParamsComponent. And we're going to just duplicate this, and we're going to target the same component.
[00:01:37] But what we want is the ability to navigate to this route, but then pass in an ID, and then act upon that. So we're gonna go params, and you denote a route param using colon, whatever you wanna call that param. So if for instance I call this foobar when I am pulling in the route params map, this is what this would come across.
[00:02:12] So it's important to use something that is descriptive, and is going to make sense once you get into the loaded component. One other thing that I want to point out here is that route order matters. And so Angular is gonna go from the top to the bottom. And as soon as it matches a route, it's going to go to that.
[00:02:36] And so if you mess this up or if you actually have something that is eagerly loaded before it gets to something that you really wanna go to, you can be like, how come I can't get to this route? It's because your route order is not entirely correct. So, with that, let's hop into our RouteParamsComponent.
[00:03:04] And what we have here is an array of lessons that every one of the lessons has an ID. So if we go into the application here, what we have is reloading the lessons, and I wanna be able to click on this, and be able to see the lesson over here.
[00:03:30] So back into our code, we need to import a couple services to make this work. So the first service that we are going to inject as a dependency is going to be activatedRoute. We'll actually just call this route, and this is activatedRoute. There we go. And the second one is going to be router.
[00:04:04] Okay, let me make sure that I have these imported in correctly. Yep, all right, now, within ngOnInit, what we're going to do is we are going to listen for the route. And so what's neat about this is this paramMap is an observable. And so if the param is changing, and you're just only catching it at one time So first I was saying param equals and I pulled.
[00:04:38] So for instance, I was saying, param equals, and I pulled the just right off of it, that there would be no mechanism to update the component to say, hey, this is a new route. And so this is the beauty of reactive frameworks, observables, etc. So paramMap is an observable stream, so that as it changes, that it notifies the underlying component that hey, this thing changed, you need to update yourself.
[00:05:09] And so from here, we're going to receive a params object. And I'm going to break to a new line, and we're going to grab the currentId. So from here, params.get, and so this is just a getter. And we're going to grab the ID off of the params object that's being passed via the paramMap observable stream.
[00:05:35] And if this exists, then we're going to set our current lesson to the, I can just call this directly. So this.setCurrentLesson, and we're going to pass in this currentId. And so now, all this is doing is when we navigate and we have an ID in the URL, it's going to capture that.
[00:06:12] And then it's going to call setCurrentLesson, which then sets the current lesson. So if we go here, let's just refresh, so it's clean. And if I go forward slash, and we go like one, you'll see now that it's loading this particular lesson, or let's go maybe with like five.
[00:06:33] You can see here now that it's pulling that in, grabbing it, and setting the current lesson. And if we wanted to navigate to this, well, it's going to look very similar to how we would navigate to a child route. And so now if we jump back into the code, we can go inside of the route params HTML or the template.
[00:06:57] So let me just open this. And let's wide this up so we can navigate to a specific route with a route param. And so on this list item here, I'm going to add in a routerLink. And then we're going to add in an array, because we need to essentially composite a new URL.
[00:07:27] And we'll go examples/params. And so this is kind of the base portion of it. And then from here, what we wanna do is we wanna add in lesson ID to this route. So we'll save that, and then we'll go back into our code, refresh this, and I'll just go to the base here.
[00:07:51] And then if I click on this, you'll see now that we are incrementing, or whatever ID that is attached to this lesson is being added to the URL, and we're loading it over here. So this is really, really handy when you want to send somebody to a specific item within a collection.
[00:08:16] So for instance, just for thought is that if you wanted to load this master detail view with a specific course already selected, this is where this technique would come in. So you could say, I'm working on this particular course, for instance, then you might be able to send somebody a link, where it had the forward slash and the ID for that.
[00:08:44] I've also done this with not IDs, because those can get kind of very long, and not something that you certainly don't wanna memorize or even type out. So you can actually set up your route params to work on really anything including slugs. And so I've attached or a part of the data model, I've had a slug.
[00:09:07] So this is kind of a friendly hyphenated kind of representation of the item that we're talking about or referencing. So that you could do, for instance, like /courses/angular-13-fundamentals. And then you can actually look it up that way. And so just however you want to implement this logic, that is entirely up to you.
[00:09:33] But the idea that if you're in a specific state with a specific item selected, you can store that inside of the URL, and then you have the ability to navigate directly to that state. And so it's important to think about a URL or a route in a way it is serialized state for the application.
[00:09:57] And so when I go to the route params example, and I click on Hello Angular, well, this route here, examples/params/1, is a representation of the state that this application is in. And so this, in a way, is representative, or you can think of it even a little bit like a state machine.
[00:10:23] Is that every route kind of represents a state, and then you are navigating from one state to another. So this is how you use params within an Angular project. I wanna go back into the code just real quick. And just for review, the little bit of logic that we use to accomplish this, we have our route here, and we are subscribing to the paramMap.
[00:10:55] And within this, we are pulling out the ID, and then if we have an ID, then we are setting the current lesson based on that.