Just wanting to know how include <span class="sr-only">(current)</span>
on my clicked active link when using Angular 2 routerLink
?
Example:
<ul class="nav nav-sidebar">
<li routerLinkActive="active">
<a routerLink="/dashboard">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li>
<a href="">Registers</a>
</li>
<li routerLinkActive="active">
<a routerLink="/organizations">Organizations</a>
</li>
</ul>
Sources:
Twitter Bootstrap > Accessibility > Skip navigation
ANgular 2 > ROUTING & NAVIGATION
2
Answers
In your component, you can add a method
isActiveLink
likeIf you want just mark actually active route, you can just add
routerLinkActive
to directive (you did this), it adding classactive
to anchor tag, so you can simply style active link in css. If you have something like :you can simply style it, using this: