Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Route Parameters Demonstration" 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:

Lukas works through a code demonstration of route parameters. Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Route Parameters Demonstration" Lesson

[00:00:00]
>> Lukas Ruebbelke: So let me hop into our app here. So let's look at this route. If we go down to the App Routing Module, it's right here.
>> Lukas Ruebbelke: So item/id. Now, notice
>> Lukas Ruebbelke: I'm now routing to an ItemComponent. So I'll show you what that is in just a second.

[00:00:31]
>> Lukas Ruebbelke: So we'll go one.
>> Lukas Ruebbelke: I have no idea what happened there.
>> Lukas Ruebbelke: Is it, hold on.
>> Lukas Ruebbelke: You can see now it's pre-populating with the red item. What if we change it here? Orange, oops.
>> Lukas Ruebbelke: And so on.
>> Lukas Ruebbelke: Now, what's happening is, you'll notice here, it's just the item details component.

[00:01:21] Because this is a presentation component, what I did, and I recommend for every route, having a container component, and then a presentation components. So that if we go here to
>> Lukas Ruebbelke: It's around here somewhere.
>> Lukas Ruebbelke: So I is after H apparently.
>> Lukas Ruebbelke: What do you think we'll see in here?

[00:01:48] If ItemComponent is a container component, what is it going to contain? Just
>> Lukas Ruebbelke: The basic layout. So it's just saying, these are the things I want in here. It's actually not doing any real layout itself, other than to arrange its presentational components on the page.
>> Lukas Ruebbelke: And you'll notice, we're passing in an item.

[00:02:17] So this is why this item component exists, and if I click in here, it's still the same presentation or component, there's nothing in here. And so, I've just creating this wrapper because I do not want item detail component to have to worry about how's it's getting it's data.

[00:02:33] I just wanna pass it in and let it render. So, that if we go here
>> Lukas Ruebbelke: Just defining this, and then we're pulling it off of this.
>> Speaker 2: I don't understand the sign there.
>> Lukas Ruebbelke: I think there's a reason, I just actually did a variation of this. Let's see if we can figure this out real quick.

[00:02:59]
>> Speaker 3: I think it's converted to a number.
>> Lukas Ruebbelke: That might be, there are some kind of interesting JavaScript like coercion style, I bet that's what it is. I think it's shorthand for like take this and convert it into a number.
>> Lukas Ruebbelke: Clever. I think, I expect like Kyle Simpson to jump out, like give us a high five right now, this is a master of coercion, and what's actually happening under the hood and what's the scope and stuff.

[00:03:29] By the way, his courses here are amazing and his books are phenomenal. I was kind of hoping you would pull like a kool aid man right now and just like, boom, yeah, JavaScript coercion.
>> Lukas Ruebbelke: Thank God for post production.
>> Lukas Ruebbelke: So do we have any questions about how this is working?

[00:03:51] We're simply creating a route, creating a parameter, and then. So route with a parameter that we can change. And then in our container component we're just capturing that stream that's coming off the route, and then using it to make a call to the server and get the data that we actually want.

[00:04:16]
>> Lukas Ruebbelke: Having tried to do this through other means in about three times the code or more, I'm pretty happy we're doing this in the three lines of code. It's pretty awesome.
>> Lukas Ruebbelke: So on that note, it's two o'clock, let's take a ten minute break. After I answer your question [SOUND].

[00:04:41]
>> Speaker 2: I can do patternmap.map, and modify the parameter, and then do a search pattern, right? Because it is a stream, so I mean if I have to do a validation before or something like that.
>> Lukas Ruebbelke: So that's a good question.
>> Lukas Ruebbelke: Let's see what happens.
>> Lukas Ruebbelke: Map
>> Lukas Ruebbelke: And from here

[00:05:10]
>> Lukas Ruebbelke: And so now I'm actually curious.
>> Speaker 2: You'll have to do params is equal to.
>> Lukas Ruebbelke: No should return-
>> Speaker 2: ID is equal to.
>> Lukas Ruebbelke: What am I missing here? Param.
>> Speaker 2: ID equal to something.
>> Lukas Ruebbelke: No, okay I see where's throwing up.
>> Lukas Ruebbelke: And I just want to see

[00:06:07]
>> Lukas Ruebbelke: So we use do for side effects. You rarely need to do this, but occasionally you'll need that something to happen in parallel. And so that's what we use this for.
>> Speaker 2: So in param elements it will-
>> Lukas Ruebbelke: So it'll just do it, but ideally you're just doing it for side effects.

[00:06:27] You're actually not affecting the strip. So let's say something was coming in, and you needed to actually send another piece of it somewhere else for whatever reason. I generally use it for debugging, I just need to see what's actually going through the stream. So actually this would be a #protip, that if you kinda wanna see what's going on in the stream, or is this turning out the way that I want, sometimes I'll just drop a do in there.

[00:06:52] That sounded horrible. At least it's working.
>> Lukas Ruebbelke: So yes ID is one.
>> Lukas Ruebbelke: Two, so you can see here, two is tracing it out. So good catch. I mean that's it, it's like. When you are working with observable streams, if you find yourself having to fiddle with the data don't do that.

[00:07:25] Use an operator. Most often than not, I don't like having to do this, let me just map it to what I really need it first. You could do it inline, but to me this reads a lot better, because you can actually follow the transformation, we're taking the parameters, we're turning it into an ID that is returning an item.