Marking Links as Active

In many cases, the built-in method we discussed before is totally fine. The <a> tags, rendered by LinkTo, have an active class, and the tag is styled with CSS to highlight it as active. However, in other cases, this is not flexible enough. What if it’s not the a tag that should have the active class? Or, what if the project uses a utility-first approach and the elements are not styled via custom class names?

In our app, both of these hold true, so we should look for another solution.

isActive method

We can rely on our trustworthy ally, the router service. It has an isActive method that tells us whether a certain route with the passed parameters is active or not. Because the band navigation markup is in the bands.band template, we could create the related controller and the “activeness” code there.

BandNavigation component

However, a cleaner solution is to extract a BandNavigation component to implement it in. This way, all the code will be nicely encapsulated in the component whose name exactly describes its purpose.

Let’s first generate the component and move the current band navigation markup there:

ember g component band-navigation

The code to be removed is commented, and the newly added code is highlighted.