1. 15
    Navigate to a component relative location with the Angular router
    1m 51s
⚠️ This lesson is retired and might contain outdated information.

Navigate to a component relative location with the Angular router

Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated a month ago

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.

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.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today