This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Style the Active Angular Navigation Element with routerLinkActive

    John LindquistJohn Lindquist

    You can easily show the user which route they are on using Angular’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to.

    angularAngular
    2 - 4
    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

    00:00 To add a bit of styling to our navigation, we'll add some styles and these are just arrays of strings. We'll say we'll take this "A" tag and we'll get rid of the text decoration. None. We don't see those underlines anymore on the navigation.

    00:15 We have home and contacts with no underlines and then let's say if the current route is active, then we want the font weight to be bold. This won't change anything because we're not using this active class.

    00:33 To use this active class, we need to say that the router link active, meaning that when this is active, then use the active class. You're mapping this to this up here, so you can name that anything you want. I'll come over here and do the same thing, set to active, let's save. You see the behavior right now is home, home is active and bold.

    00:54 Then I'll click on contacts. Contacts is active and bold, but home is still bold. The reason is that this path/contacts also matches the path, so if you look in app routes, also matches this path of nothing. There's the path of nothing plus contacts, so both of these paths match.

    01:14 To get rid of that, what I'm going to do is format this a little bit. We're going to grab the router link active options, very long directive name, and set this to exact as true. Because this is an object, not a string, we do need to evaluate it, so put the brackets around there.

    01:36 I'll hit save and these will read in these options, meaning that this path has to match exactly for this to be bold and this to be active. Now I want to click on it. Home is bold and I want to click on contacts, contacts is bold. Our navigation is styled and working as we expect it to.

    Discuss

    Discuss