Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Introducing Route Parameters" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

When an application has a collection of routes for specific containers or widgets, Lukas reviews how to go directly to a specific widget.

Get Unlimited Access Now

Transcript from the "Introducing Route Parameters" Lesson

[00:00:00]
>> Lukas Ruebbelke: How do you, if you first have a collection of things, and it's obvious that we have routes for specific containers. So let's say widgets. But what if you wanted to navigate directly to a specific widget? How would you do that? And so this is where route params come in.

[00:00:18] So I'm going to walk you through a quick solution. And then we can chat about this. So
>> Lukas Ruebbelke: First and foremost, when you are saying, when I go to this URL, I don't wanna see all the items, for instance. I wanna see a single item. So it's the ability to select and view a single item in a collection dynamically.

[00:00:46] And so we need to set up a route for that. So using this colon kind of variable scheme which is pretty common, that is /:id. So we're saying in this route there is a route parameter, and it's going to be dynamic, it could be anything. And then,
>> Lukas Ruebbelke: Within the item component so I've created this component, we'll see it in a second.

[00:01:13] OnInit we're actually watching the route paramMap observable. So the parameters on the URL has essentially been wrapped in an observable. So your URL or your route is reactive. In other words when it changes, you are able to capture that or subscribe to that observable stream, cuz again, everything is a stream, when something happens, it's happening in the universe.

[00:01:51] So this route.paramMap
>> Lukas Ruebbelke: .subscribe, or we're just saying, so one is we did subscribe we would be getting the Params or the Param app. In this case if you remember switchMap from yesterday, it's simply saying, I want to map this stream to a brand new stream. So here we're saying paramMap, this is amble stream, we're saying when this comes through I want to take the parameters.

[00:02:25] And I'm going to pass it to the itemsService to get me the item with these IDs. So it's saying params.get ( id ).
>> Lukas Ruebbelke: And so what we're doing is, when the route comes in or it changes, cuz you're not actually refreshing the page, we're able to subscribe to that,

[00:02:47]
>> Lukas Ruebbelke: Grab what we want off of it, send it to a service that's making a remote call, returning that observable and then assigning it to our local object.
>> Lukas Ruebbelke: So now, again, state management, flow control and code volume. Look at how much we're getting done in three lines of code.

[00:03:12] And now that there's no, other than the item object itself, everything else is living in the stream. And it's all completely encapsulated in this single stream. This is why our shares, I'll come over the moon for it. Because I'm able to do this in three lines of code.