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

Already subscribed? Sign In

Autoplay

    Navigate to a component relative location with the Angular router

    Juri StrumpflohnerJuri Strumpflohner
    angularAngular
    ~7.0.0

    In a well structured and modularized Angular application we may not want to have our components know the entire path of a route, but rather we may just want to redirect “locally” within the current route. The Angular router allows us to specify such relative navigation which is what we’re going to learn in this lesson.

    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 The angular router doesn't allow us to only navigate to absolute URLs. For instance, as we specify here with the router link. Here we indicate at /contacts and then the second segment is list. We can navigate among our different kind of views.

    00:16 Now especially if we take a look at our people list components, you may have noticed that if we click here on people and then on a sub-item, that navigation remains active, and just the sub-item gets refreshed.

    00:27 Now by taking a look at our inner part here, those router links are actually specified by indicating a forward path again. Basically to /people and then appending a person ID. If we take a look at how that routing is defined, we can see that the personal digital component, which is visualized here below, is actually a chart of that people list component.

    00:50 This also reflects the path. Both shared first part, people. Then basically whenever that second part here is empty, the people list component is displayed. If there is a / again with some ID, then the person detail component gets loaded.

    01:04 Now we can take advantage of this behavior by actually going inside here and removing that whole part. The angular router is hierarchical, in that it understands that the router link here points to a sub-child of that people list component.

    01:18 All it has to do is to append that ID of the person, which we're currently iterating over here, to our URL. Load basically then the detail component, which gets visualized just below here. Let's save this and try it out. As you can see, it still works by just appending the URL here.

    01:34 This kind of approach is really powerful because you could also do something like that, which wouldn't make much sense in this example. For instance, we can navigate one level up. Then say want to navigate to people. Then to personal ID again. Even that works just as expected.

    Discuss

    Discuss