Dynamic Routes & Router Link

[00:00:00]
>> Let's take a step kind of far back and I want you to think about the story that we've been telling so far. Now, you can make a multi-page application that can display and communicate with components. That's what you can do right now. Those are all the skills you can do, you could do dynamic data in components, you could display a multi page application, you can do all of that so far.

[00:00:29]
So now hopefully this is kind of bringing clarity to the point where I said, well, you don't need a ton of stuff, right, to get started, even though Angular is very broad and very deep, you don't need a lot. I mean, you can do a lot with just this.

[00:00:44]
But you can do more if you had a few more tools. So we're gonna continue to build out our tools. Before you roll, any questions I can answer?
>> I'm just a little unclear on the router-outlet.
>> Good question. Router outlet, this is literally just the space in our component where we will display the route.

[00:01:06]
So meaning, when you route to the greeting component, where would that be displayed? But let me show you what I mean by that. So I'm gonna do this. Can I make this work? It probably ain't going to work. Let's see. We talked about music today. Okay, cool. So I'm gonna take this music note, and I'm gonna repeat it a bunch of times.

[00:01:24]
I'm sorry if it's hard to read. It's not bad. Watch this. Okay, so now, you see? So the router outlet is literally the place on the page where wherever you route to, where it's gonna show up. That's what I was saying that you could share. So now imagine instead of saying enable routing to see the greeting below, imagine that was a header for your page.

[00:01:49]
You know, with your menu bar, right? And then imagine that you could click Hello or About us, or blah, blah, blah, and then it all appears here. But I'll show you more of that, don't worry. I'm gonna get you there. But did that help clarify what that does?

[00:02:06]
>> Yes, thank you.
>> But I'm gonna do one more thing, I can't help myself. All right, I can't control myself, sorry. All right, refresh. It's there. You see, that's what that gap is. It just didn't like what I did. It was like, no, you're not gonna get away with that.

[00:02:23]
But I could do this, though. Okay, let me show a more practical example instead of being silly, okay. Hold on, let me just get this out of there. Cuz that's a great question, I love that question. So I can also put this in a section, okay? Just a container, nothing special about the section.

[00:02:43]
But let's say if I gave it a style, and I said the style was border: solid 1px red, the most famous debugging style in the universe. Okay, let's see if that does what I want it to do. You see? My router outlet is just contained anywhere, cuz it's just rendering a component at the end of the day.

[00:03:07]
Which I understand, because if you're thinking about the router outlet, or routing is like the whole page is refreshing. The whole page is changing, because the URL is changing. That's not the case. What routing is doing in Angular is choosing which component to display on the page that has a router outlet in it.

[00:03:27]
So now if I moved it out of there, that's a great question. Love this clarifying question. See, that box is now empty. I can put this wherever I want. Let's see. I can do that too, right, cuz it's just moving that component around on the screen now. Yeah, good question.

[00:03:47]
That was excellent. Great clarifying question, okay. All right, before we move on, what other questions can I answer? Okay, we'll keep going. This is a good question that I would have asked, all right, Mark, you show me how to route if I went to the default route, what about the rest of it?

[00:04:10]
You're right, good question. Let's do this. How do you make links, actual clickable links on the page that I can click to with my mouse? How do I do that? Okay, you use what's called the router link to do that. So we got the router link. It's an attribute.

[00:04:26]
It's a special attribute in Angular called a directive. It's called a directive. And a directive has the same kind of makeup as a component. But most times, they don't have templates associated with it. What a directive is really great at is adding behavior, friends. It adds behavior to an HTML element, for example, or to a component.

[00:04:55]
So now, what do I mean by that? This a tag used to, before I got involved, it used to just link to a different page. But now, it links to a component because of the routerLink. You see, so I changed the behavior of the a tag with the action of the directive attribute routerLink.

[00:05:14]
So I got that, and then I go to details, which is my path, where I'm gonna go, go to there. But we know what's at details, it's the details component most likely. All right, and we got RouterLink there, okay. We're still on the routes, right? Here's the thing that you probably do a lot.

[00:05:33]
Give me a thumbs up if you've ever done this. You've had a route like to details, but you have to pass it an id or something. You've done that before, right? Okay, you can do that in Angular, right, cuz you might wanna show the display data for a particular element.

[00:05:47]
How do you get there? This is how you get there. For our path, we have details for /:id. That :id is a placeholder, okay. So, that's a placeholder, meaning that a dynamic value will be available there once someone navigates to this route. And I can even get access to this id, okay, this placeholder.

[00:06:07]
I can even get access to it. Let me show you how we can do that. All right, so there's my product id. So I call this the destination for the route info. Eventually, whenever I get that id, I want it to live in this product id, okay, whenever I get it.

[00:06:28]
So I can use it to look up the product information from the database, or whatever I'm gonna do. Our friend Input is back. Can I say hey Input, hey Input. Thank you. All right, Input is back, but in the form of a setter. And the syntax looks a little tricky, so let's make sure we break it down.

[00:06:49]
I'm saying set the id as an input, okay. And then I want to assign the value that I get to productId. But that name id, that name looks familiar. You see it now? You see that id on the path?
>> So the path is where you're defining it.

[00:07:16]
>> Yes, I'm defining it on the path. You see that :id? That has to match. Because if I do this format, this is a nice shortcut, okay? This is a nice shortcut in Angular that I can use an input to receive a value from the URL. Because you usually use inputs to receive value from other components.

[00:07:39]
But Angular also has the feature that I can use the Input to receive a value from a URL. Okay, this.productId equals value, because I'm saying whatever the id was set to, pass it into this function as a value, all right, and then store to my productid. But if you want to be able to take advantage of this feature, if you wanna use this, you have to use with component input binding, okay?

[00:08:08]
You have to use this feature to make that from the URL down to the input. To make that link, you've got to enable it cuz you might not want that, is my whole point, right? You might not want it. But if you do want it, this is a nice way.

[00:08:22]
So the way you used to have to do this. Anybody ever use Angular before in here? Anybody ever write any Angular code? Okay, so you might have been like, what happened to the activated route? Where is my get parameters dot map dot, dot, dot, dot, dot? Where's all that kind of stuff?

[00:08:38]
This is a different way to do that same thing. This is nice. This is nice and clean.