Active Link Styles

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.