Active Link Styles

In this lesson, we'll learn how to make links appear active when a user clicks on them.

We'll cover the following

The next objective is to add the active class to the link the user is currently visiting. While not required, it can help the user identify where they are. In Bootstrap, the active class can be applied to the <li> element wrapped around the <a> element.

Here’s the problem, though: we want to dynamically add the class. The active class shouldn’t be applied to the element if the URLs don’t match. Angular comes with a directive for this called routerLinkActive.

Let’s update the app.component.html file to use it.

Get hands-on with 1200+ tech skills courses.