Create a hyperlink to an Angular route using RouterLink
Usually when defining different routes, we want to give the user the possibility to switch between them. Most often this happens through hyperlinks defined in some kind of application menu. In this lesson we will take a closer look how to define links to different application routes. Moreover we will learn how to leverage Angular’s routerLink directive for this job.
Instructor: [00:00] Here we have a very simple application which uses the Angular routing system. We have here the global app-routing module where we have already some routes, for instance the home route, which you can see displayed or the about route.
[00:12] Then we have some sub-modules, which here is the context module with its own routings, for instance contact list. Let's give it a try so we can navigate to contacts list. Similarly also for the people module, we can navigate your people list or to a specific person actually with a given ID.
[00:30] While this, of course, works perfectly we definitely want to have some kind of menu, which allows us to navigate between those different kind of points. Let's open up the app component HTML where we have to find our route for outlets.
[00:42] At the very top here, let's define here navigation bar. Here we will basically then add a couple of hyperlinks, for instance for home, which would then point to the home route. Let's say for the about, which points to the about route and similarly also for the contacts list, contacts, and then also for the people list.
[01:06] If you save this, you can see there appears the navigation bar at the very top. We can now use that to navigate among our different routes. Rather than specifying these directly, there's actually a directive which gets exposed by the Angular router package, which is called routerlink.
[01:23] We can use that one to actually improve here our routing experience. Here we specify directly the path, which in this case is home, and pass it ahead to that routerlink. Similarly, we can do, for instance, for the about page as well.
[01:41] If you will refresh, you already notice a different behavior. Here we have at home. We jump at about. You can see how the URL gets updated. We, again, also get a new view. However, if we click the contacts part or the people part, the entire page gets refreshed.
[01:55] That's something also that Angular router handles behind the scenes when we use the routerlink. Let's also quickly update the remaining parts. If you save, we can see how we can navigate here between those parts without any kind of page refresh.
[02:11] Note, the very same thing also works here, for instance, for our people list. If we navigate to that people list component here, we can actually add here a hyperlink just as we did before.
[02:22] We again use the routerlink directive. Just that in this case, we specify people as the first segment. There is a second segment. We directly issue here the people ID.
[02:33] If we save that part again, we can see that we can click on it. The router will automatically update our URL. We can navigate them back and forth on those various IDs.
[02:45] The advantage of specifying these segments is that we can specify hard-coded parts as well as variable parts just in-between, which get directly data-bound to that model, which we are processing here in the template.