This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Router Links" Lesson
>> For this module, we're going to talk about Angular routing, so we built a bunch of components, we have a lot of stuff in our application right now. But if you've noticed for us to go from one kind of component or feature to another, we have to go up into the address bar here, and we kind of have to manually type this in, which not a super great experience for the user.
[00:00:28] So, in this module, we're going to one, talk about how to set up routing, how to navigate to routes from the template. I will also show you how to do a lazy load a template, and then how to dynamically navigate to a route using the router service, so let's get started.
[00:00:49] In our app component.ts, there is this links array, so I went ahead and stubbed this out in from the starter branch, and because we have two components home in courses, it's just a basic structure describing what that route would look like. So path we gave it an icon, a title etc, so what I wanna do first and foremost is let's hop into our app.component.html, and let's build the side nav out.
[00:01:24] So I'm just going to build the nav the list out of the items, and then we'll talk about how to actually navigate, to those routes. So, I'm going to create a nav element, and then from here, we're going to use links, but we're gonna decorate this with a mat button, We'll give it a class of nav link, And then we're going to use a G4.
[00:02:04] So we're just going to iterate over our links collection. So "let link, Of links", I'll just start to break this down, so it doesn't get too crowded. And then, within the anchor tag, we're gonna go ahead and use a map icon and, we're gonna bind that to link.icon, And then underneath of that, we're just going display link.title, so this is nothing to do with routing just yet, it's just basic Angular.
[00:02:47] So let me just verify that I did this correct, links path, there we go. All right, let's hop into the app and let's just make sure that it's rendering, there we go. So right now we have these buttons, but when I click on them, nothing is happening. So, what we need to do now, is we need to essentially create a way that when we click on this anchor tag, we can go to the route.
[00:03:15] So one thing that we could do is add in an href because we know what the route is, but there's a better way to do that, and that's using the built in router link. And so, we're going to do router link here, and we are going to bind to this so this is property binding, and then we're going to bind this to link.path, all right?
[00:03:46] And so if we go back to our app, now we have the ability when we click on this, this is now navigating to the appropriate route. And if we actually inspect this element, Let me we just drag this up here so we can see this, that On our anchor tag, if we go down, and you look in the href, it's going ahead and it's actually filling in essentially that path for you.
[00:04:20] But it's also in relation to, let's say you have like nested routes or whatever it's actually keeping track of where you are in relation to the rest of the link tree and then filling that out for you. So, it's just really nice to not have to worry about well am I in relation to this or whatever.
[00:04:37] So if you're doing like relative routes, router link does a really good job of figuring that out for you. And so now we have the ability to link from one route to another.