DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

Angular routerLinkActive directive

Have you ever wondered how to highlight a specific HTML element, such as a link or a button, when a particular URL is selected? Something similar to this:

Image description

In Angular, there is a specific directive for this called routerLinkActive. Here is how you can use it:

Image description

The value set to routerLinkActive is the name of a CSS class (or several CSS classes) that gets applied to the HTML element when the current URL path matches the path of the routerLink directive on that same element. In other words, if the path is page1, then the button element has an active class applied to it.

Image description

As a result, all I did to style the above example was add that CSS class definition to my global CSS file:

Image description

And that's it! Note that the directive supports several other options documented here:

Image description


I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up