Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.


    Build Angular Navigation with routerLink

    John LindquistJohn Lindquist

    Angular navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular’s router to navigate between your defined routes.

    2 - 4


    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


    00:00 To create some navigation, I am going into my app component, where the router outlet is in my template. I'll just say SomeNav. I'll create a tag, and instead of href, I am going to use a directive called RouterLink. This RouterLink is going to be empty because that one's going to point to home, when I click on this.

    00:18 The second one, not href but RouterLink, is going to point to contacts, so this one will load contacts. Just format this a little bit and hit save. You'll see how the navigation of home, contacts, home, contacts change in the URL, and load in those individual modules.