Configure Your First Angular Route

Map a Second Angular Route to a Component

Build Angular Navigation with routerLink

Lazy Load Angular Modules with the Router

Style the Active Angular Navigation Element with routerLinkActive

Use Params from Angular Routes Inside of Components

Understand the Angular Base href Requirement

Build Dynamic Angular Navigation with ngFor

Load Data to Build Angular Navigation

Load Data Based on Angular Route Params

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

Manage UI State with the Angular Router

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.

https://app.egghead.io/api/v1/lessons/angular-2-style-the-active-angular-navigation-element-with-routerlinkactive/subtitles

[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.

Style the Active Angular Navigation Element with routerLinkActive

Share this video with your friends

Course

Manage UI State with the Angular Router