Routes in Angular: show the active route

How to show the active route in the browser of an Angular application, the one that is being displayed at the moment.

After delving into Angular’s routing system, in an article that contained a lot of information, we are going to carry out a much simpler step, but essential for the usability of the applications. It is about marking the active route in the browser.

Of course, styling is a CSS responsibility, so we’ll have an “active” class or something similar that we’ll use to apply styling. However, that class must be applied dynamically to the element that it touches at all times and that is what we have to do with Angular.

Fortunately, this part is pretty straightforward, thanks to a directive that allows you to apply a CSS class when the browser is displaying a given path.

routerLinkActive Directive

The Angular routerLinkActive directive is what allows us to apply a class dynamically, depending on whether a given link has its route active. The way to work in principle is very simple, as we will see below.

Like anything in Angular, we start by importing the directive we intend to use into the component’s TypeScript.

import { RouterLinkActive } from ‘@angular/router’;

In the following code we have a first approximation, applying the routerLinkActive directive to the browser, in our template. Although it is still not exactly the most complete, we will soon see why.

As you can see in the code above, a class called “asset” has been applied, so you’ll need to create this class in the component’s CSS, of course. If not, there will be no CSS to apply.

An interesting detail regarding Angular is that we have placed a literal string as value to the directive. This is why the directive is not enforced with the square brackets, because what is in quotes as a value is not a variable or an expression to be evaluated, but simply a literal string: “active”.

Note: Note that we have created an additional route, regarding the exercise as we left it in the previous article. This will force you to practice a bit, creating the route in the Routes array and then the corresponding component. We leave this for you.

Application of routerLinkActive on top of the container

There are times when you don’t want to apply the CSS to the link itself, but to its container. This is not a problem for routerLinkActive, which also works if you have to apply that class dynamically to the parent where the navigation link is.

For example imagine that you have a list and that the style of the active element must be placed in the LI element. There would be no problem to get that detail, as follows.

Our template could then have this form:

And although this is not a CSS Manual, we could apply some styles like these:

.active { background-color: #ccc; } .active to { color: green; } ul { list-style: none; } li { display: inline-block; margin-right: 20px; background-color: #eee; padding: 15px; }

Apply style to exact path only

If you run your application, as we have left it, you can see that we have a small problem. The “home” link always appears as active. That is, we navigate to the other sections of the site, which are correctly marked as active, but the “home” link always remains active as well.

It’s not a bug, it’s working as expected. By default, routerLinkActive marks as active a browser link that contains the route, not that it is exactly that route.

I explain. In routes like http://localhost:4200/quienessomos the exact path is “/quienessomos”, but the root path “/” is contained in “/quienessomos”. Therefore it happens that when visiting “/quienessomos” two links are marked as active, the root and “quienessomos”.

This might not be a problem in some cases, but if you don’t like it, it can be perfectly fixed. For this we need to know a configurator called “routerLinkActiveOptions”.

Note: As you’ll see in the code shortly, routerLinkActiveOptions might look like a new directive, but it really isn’t. It is part of the routerLinkActive directive and is used to configure its behavior. Since it is not a directive, but is part of the directive that we have already been using, we do not need to import routerLinkActiveOptions.

This configuration of the directive gives us the possibility of configuring, through an object, some options to mark the active link. The one we need to use is called “exact”. Applied to our template, it would look more or less like this:

Look at the following points:

• Now we do need to put the bracket notation in routerLinkActiveOptions, because what we are passing is not a string, but some Javascript that has to be evaluated. In this case we pass an object to it.
• In the object, we put “exact” with the value true, which indicates that this link will only be marked as active if the exact path is “https://developmentweb.com/”.

Now, if you run your example, you will see that it is as we would have liked, only marking the route that is needed in each case as active.

conclusion

We already have the necessary tools to make a nice browser, using internal routes of the application. Our routing system in Angular is more and more configured and thanks to this knowledge we will be able to make applications with a more professional appearance.