Routing in Angular 4

In this section, we will continue from last post http://bit.ly/ng4-route-1, where we have introduced routing. In that post, although routes were working but there was no visual indication for the same. This is a simple change, basically CSS change. Let’s fix that first. Below is the snippet for the same.

Here, I have replaced active class with routerLinkActive. It dynamically checks which link is clicked and make that active. Therefore, I have copied the same in all the links. With the above change in place, when I go ahead and see my application. Although, here I am at movies tab, but home is also highlighted. Whats the problem here? The problem with this / is always part of the path which means even if there is /movies or /reviews, / is part of the path, hence Home link is always active. This problem is also known as empty part segment.

Now, empty part segments is part of all paths. To fix this, we can add few configuration to this. Below, in the snippet I have added [routerLinkActiveOptions] with exact property set to true. This says, to bind the empty part segment, when this is only available.

With above change in place, it will present the routing in expected manner like shown below.