In this lecture, we are going to add styling to our links based on the current path.
We can improve user experience by highlighting a link when it's active.
Highlighting links can help the user indicate where they are in our app besides looking at the address
bar.
It's a common feature to add to an app.
For example, when we click on the about link, the link remains unchanged.
We should change the color of the link when the user is on the about page.
Angular introduces a directive for helping us accomplish this action.
Let's open the navigation template file.
Search for the about link in the template on the anchor element, we can apply a directive called Router
Link Active.
The router link active DirecTV will apply a class to an element if a path is active, it cooperates
nicely with the router link DIRECTV.
This DirecTV will check if the router link DirecTV is applied to the same element.
If so, the path passed into the router linked DirecTV will be compared to the path in the address bar
of the browser.
A class is applied to the element.
If there's a match, the name of the class can be configured by passing in the class name to the DirecTV.
Let's change the color of the link by adding the text Indigo 400 class.
This class will be dynamically attached to the element.
In some cases, we may need to apply classes to the parent element of the link.
The Router Link Active Directive can be applied to parent elements of links.
For example, let's add the same directive to the list item element.
The name of the class to attach will be called Text Indigo 400.
If the router link active DirecTV cannot find the router link DirecTV, it'll search for this directive
on the child element.
We can apply this directive directly to the link or the parent element.
Either case works.
Let's give our link a test.
Refresh the page in the browser.
I'm on the home page, therefore the class never gets applied to the about link, the moment we click
on the about link, its color changes.
We should check if the class gets applied to the parent element.
Inspect the link with the developer tools.
Perfect.
The text Indigo 400 Class gets attached to the link item element.
This is the exact behavior we were looking for.
Attaching dynamic elements is easy, but there is a common gotcha we should be aware of.
Active classes may get attached to elements that don't have an exact match.
Let me show you what I mean.
Switch back to the editor.
Let's make a copy of the router link and router link, active direct debits.
Next, we will apply these directives to the Manage link in the navigation menu again.
Be sure to remove the RF attribute.
Lastly, we will update the path in the router or link DirecTV to point to the home page.
In a future lecture, we will update this link to point to a proper route.
For now, we will point this link to the home page.
Let's navigate to the about page in the browser.
If you aren't already logging to your application.
Otherwise, you may not be able to see the Manage link.
The links are highlighted in the navigation menu, which is excellent, but there's one problem we're
on the about page, but the Manage Link gets highlighted.
This behavior can be confusing to users.
These links have completely different paths.
We are encountering this issue because of the default behavior of the Router Link Active Directive.
By default, this directive will perform a partial match.
Here's a diagram to break down this behavior the current path is Slash about angular will perform a
partial match against our links.
If a link partially matches the path in the address bar, Angular will consider it a match.
Technically, every path contains a forward slash.
Therefore, Angular will consider every link that points to the home page to be active.
This is why we manage link changes color.
Partial matching may not be the behavior you're looking for.
It can cause a lynx appearance to change unexpectedly.
We can override this behavior by binding an object of options to the link.
In the resource section of this lecture, I provide a link to the Router Link Active Directive.
Typically, you will want to refer to the documentation for more information on how to configure a directive.
Let's scroll down to the property section.
One of the properties listed on this page is called Router Link Active Options.
Believe it or not, directives can have properties decorated with the input decorator.
This feature implies we can pass on additional values to this directive.
According to the documentation, we can pass in an object to configure the directive.
One of the properties in the object is called exact.
If we set this property to true, angular will enforce exact matching.
Classes will only be applied if the path matches 100 percent to the path in the URL.
Let's head back to the ED and the navigation component.
We will update the Manage link by binding an option called Router Link Active Options.
This property will be bound to an object inside this object.
We will add the exact property with a value of tril.
Refresh the app in the browser.
This time, the Manage Link does not get highlighted.
We can navigate to the home page to test if the link gets highlighted.
We have successfully highlighted the links in our app.
It can be tricky because of angular as partial matching behavior.
You should always be aware of this behavior whenever your styling links.