9378

Angular 2 routerLinkActive

Question:

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.

Recommend

  • Angular4 routerLink inside innerHTML turned to lowercase
  • Binding to Input Properties of Child Component within Router Outlet
  • CSS menu bar to span page width
  • Forcing RTL order in a JTextArea
  • Set a line break in justified text, and still have it justify
  • Reason to integrate Spring Web-flow with Spring MVC
  • display first tab as default when page loads
  • Meteor JS Routing on Angular 2 Tutorial doesn't work
  • TabBarController: Orienting views in different orientations
  • Yii2 disable highlighting menu item
  • UWP navigation (Template10), Pivot control, multiple frames
  • Add foreach value to Ajax
  • Declaration of does not work with Ionic's ion-nav-view in IBM MobileFirst
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • Eventbus onMessageEvent not getting called
  • Jquery Show & ScrollTop (or ScrollTo)
  • CSS: How to fix overlapping divs
  • Change navbar in bootstrap if user login
  • Android Chronometer starts and stops but carries on counting when stopped
  • Creating a Multi-Step Modal Using Jquery
  • onBackPressed() not being executed
  • Android fill_parent issue
  • Read text file and split every line in MSBuild
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do I configure my settings file to work with unit tests?
  • embed rChart in Markdown
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?