So, I understand how to use RouterLink and RouterLinkActive in the traditional sense. It's pretty easy to define classes that need to be applied but I was curious if you're able to use RouterLinkActive to actually show/hide an element.
<div class="btn-group btn-group-justified toggle-nav"> <div class="btn-group"> <button type="button" role="link" class="btn btn-default btn-lg" routerLink="/log-in" routerLinkActive="btn-primary text-bold">Sign In</button> </div> </div>
I'm looking to show a font awesome icon next to the button text for the selected route (it's a button group). Thank you in advance for the help. :]Answer1:
You can use the localRef and add classes based on the boolean value of the active state. Here is the small snippet for reference.
<li routerLinkActive #rla="routerLinkActive"> <a [routerLink]="['/log-in']"> Sign In <i *ngIf="rla.isActive" class="fa fa-circle" aria-hidden="true"></i> </a> </li>
When the route is matched., you should see a dark circle in line with the Sign In Text., hope this solves your problem.