Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Create a hyperlink to an Angular route using RouterLink

    Juri StrumpflohnerJuri Strumpflohner
    angularAngular
    ~7.0.0

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss