In Angular, how do you determine the active route?

by

With the new Angular router, you can add a [routerLinkActive]="['your-class-name']" attribute to all your links:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Or the simplified non-array format if only one class is needed:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Or an even simpler format if only one class is needed:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

See the poorly documented routerLinkActive directive for more info. (I mostly figured this out via trial-and-error.)

UPDATE: Better documentation for the routerLinkActive directive can now be found here. (Thanks to @Victor Hugo Arango A. in the comments below.)

More Related Contents:

  1. Angular 2 router event listener
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 2 Sibling Component Communication
  6. JS : Convert Array of Strings to Array of Objects
  7. Angular: Can’t find Promise, Map, Set and Iterator
  8. Angular 4.3.3 HttpClient : How get value from the header of a response?
  9. Angular2 component’s “this” is undefined when executing callback function
  10. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  11. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  12. Load existing components dynamically Angular 2 Final Release
  13. Angular 5 Scroll to top on every Route click
  14. Nested arrays in Angular 2 reactive forms?
  15. Angular: In which lifecycle hook is input data available to the Component
  16. Call a function on click event in Angular 2
  17. Angular 4 Filter Search Custom Pipe
  18. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  19. How to Pass data from child to parent component Angular
  20. How to handle query parameters in angular 2
  21. Angular2 too many file requests on load
  22. What does Angular 2 hashtags in template mean?
  23. Generate dynamic css based on variables angular
  24. Angular interceptor exclude specific urls
  25. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  26. How to iterate using ngFor loop Map containing key as string and values as map iteration
  27. Plain Javascript as Angular 2 service
  28. How to check empty object in angular 2 template using *ngIf
  29. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  30. angular 2 access ng-content within component

Leave a Comment