Style the Active Angular Navigation Element with routerLinkActive
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.
[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.