New Angular 1 Component Router - Highlighting the link associated with the active route

Question

I have a navbar with two links:

<nav>
  <a ng-link="['Route1']">Route 1</a>
  <a ng-link="['Route2']">Route 2</a>
</nav>

I would like to highlight the link associated with the active route. Essentially, I would like to add a class called router-link-active to one of the two links above. What's the easiest way to do this for the new Angular 1 Component Router?

Answer 1

UPDATE:

The ComponentRouter for Angular 1 is now deprecated. For using angular 1.5 components, it's recommended to use the well-known ui-router.

---

Angular 1 Component Router automatically adds the ng-link-active class to active ng-links.

If your version isn't adding this automatically, you are probably using an outdated version of the Component Router. I've been using this version which is a more recent compilation rather than the one stated on the docs (which is 0.2.0).

Let's hope they get it production-ready soon.