In this guide I'm going to show you how you can take advantage of a very cool feature built in in Angular 2 two specifically with their router and the feature which I've already discussed is the ability to toggle the active status of different items in your nav bar. And not just in your nav bar you can do this in your entire application, but it really makes sense to have it in the nav bar.

So see right here. What I would like to have is when you are on the proposal page I want to actually have some way of knowing that. So the way that bootstrap works by default is having a blue background eventually we'll change that style so it doesn't use just kind of a plain vanilla bootstrap. We go with our own styles and here for some of these I want to have docs, say, have a like a darker kind of color. If it's on the doc page like we're on right here.

So the way you can do that is by using one of the built in libraries and I'll start off with proposals and it's called router link active. Notice how it's kind of similar to a router link. Except now it's router link active and set this equal to active.

And now if you hit save let's come in. If you see nothing has changed on proposals because we're on the doc page. But now if I click on proposals watch what happens. Now we have this activated kind of background. So let's go and add this to the rest of them.

And then I want to walk through exactly what's happening because it's really neat, and it's something that usually if you're coming from other languages like specifically rails in when you do this you have to create a full helper library for being able to accomplish this kind of feature.

Here you can simply put this one line of code in and it does all of the work for you which is pretty awesome. So I'm going to do this to docs and to home as well. Now they all have router link active and hit save. You can see nothing changes. The only thing that changes is if you click on one of the items so if I click on home now notice how home is a little bit darker and docs it's the same thing proposals if I go to a new proposal now you can see, oh this is kind of interesting.

It looks like we have a little bit of a bug right here where it says proposals new proposals. And both of these are marked as seen as being active.

And this is something that is definitely a little bit interesting and what my guess is is let me play around with the your rules just a little bit more so we have docs. We have proposals, which works fine. Then we have new proposal and so this is the only one that's triggering it and what the issue actually is is that we do not have a or I should say the active search is being a little bit too broad and we need it to be exact and thankfully there is a attribute made just for that provided by router link active.

And so we can add it to our item and aI’ll explain why this is happening right after this so I'm going to make this an outlet. So we need to put it in brackets and say router link active and it's going to be router link active options and set this equal to a set of options.

Now this takes in a hash of values and what we need to say is that we want it to be exact true. So what's happening here is proposals is so similar to proposals because it's taking in just this value that it is it's being a little bit too broad because it's being triggered even when new is there.

So if we don't put exact true on this item then any time there's going to be proposals new or anything like that anytime the word proposals is in then the router link active system is going to come into play and that's why we have these duplicate values.

So you hit save and now let's come back to his proposal and you can see that fixed it, and now it's still working. That is how you can fix those little bugs.

Now let's take a step back and see exactly what this is doing. So I'm going to come up to the very top and create some embedded styles. I will get rid of these. This is not how you would create styles but what I want to show is just how this works all on one page. So I'm going create a class called active versions I'm going to define a class called active and I'm going to make the background color red.

So what's happening right here is when we click on one of these links what angular is doing in the background is it's actually taking that and it is checking to see is the route that we're on the same one as whatever this element is. In this case our element is Docs and so if it is what it does is in the background it is placing a special class of active.

You can name the class whatever you want. We said router link is set to active So that's what it's doing. And if you want to see this because you don't believe me perfectly fine. Click on inspect and what you'll see here is, kinda keep, your eye open here. Notice how we have our class as just being nav link. If I click on this look what happened right here.

Now it says nav link is active and if I switch back to Doc then it removes that active link there, that active class from home.

This is really neat, so this is something that is provided for free with the router library that angular provides and it allows us to dynamically add classes based on whatever page we're on. So it's allowing us to create a special class and add a special class just because it recognizes that this is the route that is being called.

Like you also saw we have some additional options so you could make something that's really broad and you may wonder why we would have something like this,
and this actually comes in really handy. I imagine that you had some kind of blog CMS or something like that, and you want to have any time that a user is on the dashboard and they're looking at their posts.

You want to have on the left hand side like say a sidebar kind of like Wordpress or something. You want it to say active or too, you know, have a different color background. Even if you're on and you're looking at different post pages. So what the system would do is it would look in the URL bar and say OK this has the word posts that has that in the path, just like we have proposals right here.

Even if it's proposals slash new or proposals and then a long ID for editing or anything like that it still would let you have access to that sidebar item which is something that's really handy it's a great way of doing it. It means that you can have the ability to have exact routes exactly like this. And also to be a little bit more fuzzy like we saw before.

I'm going to get rid of this because we're eventually going to customize how the active state works. But for right now I like the way that it works just right out of the box so we have home docks and now all of this is working. So just in review what we covered here in this guide is the ability to use the router link active component inside of the angular view and how we can dynamically change and add a active class.
And also how we can customize the options all of which allow our entire user interface to be more dynamic and it allows us to also have to write less code.

Resources

• Code at this stage