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.