Stack Overflow
Stack Overflow

Questions tagged [routerlinkactive]

60 questions
52
votes
1 answer

Why Angular2 routerLinkActive sets active class to multiple links?

I'm trying to implement routerLinkActive to my app but i'm facing the issue that it's sets class active to multiple links. Here's how i'm doing it
25
votes
3 answers

Angular 2/4 - routerLinkActive not working properly

I have a problem with my routerLinkActive. Here is two Gifs to explain. First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works. When I click at first on the…
Wandrille
  • 6,267
  • 3
  • 20
  • 43
16
votes
3 answers

How to use "routerLinkActive" with query params in Angular 6?

I have a problem in Angular: I have three links, one of them has query params (due to using a resolver). If I click the first and the third link, the routerLinkActive is set. If I click the second link routerLinkActive is set too. But if I change…
Sebastian S
  • 367
  • 1
  • 6
  • 16
16
votes
5 answers

Angular routerLinkActive for multiple paths

In my Angular 5 project I've got a bootstrap nav-bar menu. routerLinkActive does work nicely when the start of the path matches the routerlink of the menu, like:
  • Sam
    • 28,421
    • 49
    • 167
    • 247
    • 8
    votes
    1 answer

    Angular 6 routerLinkActive not working

    I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I…
    R Shavers
    • 91
    • 1
    • 1
    • 6
    7
    votes
    2 answers

    How can I use relativeTo property in html template along with routerActive?

    I need to use 'relativeTo' property as well as 'routerLinkActive' directive in my application. Having a click listener function that routes using router.navigate(this.router.navigate(['path']{relativeTo:this.route}); would be okay. But in that…
    PCK
    • 1,254
    • 6
    • 20
    • 37
    6
    votes
    1 answer

    routerLinkActive in Angular 4 doesn't add class when only parameter changes

    I have a problem with routerLinkActive in angular 4. I have this setup. export const FruitRoutes = [ { path: 'fruits/:id', component: FruiteNav, children: [ {path: '', component: FruitGeneral}, {path:…
    Jens Alenius
    • 1,931
    • 2
    • 16
    • 20
    4
    votes
    3 answers

    How to pass variable query parameters with a routerLink in Angular 5

    Within an *ngFor loop, where I'm building a list of search results (mat cards) with sample reading texts, I want to allow the user to click on one of them to read more, and open a route to a document template populated with the right doc. This…
    AppDreamer
    • 1,266
    • 3
    • 16
    • 34
    3
    votes
    2 answers

    Angular 2 routerlink with multiple routes?

    I want to remove a class only one ONE route, (Or add a class on all BUT one route.) How is that possible? I have tried [routerLink] with multiple parameters to no avail:
    Chris J
    • 596
    • 1
    • 8
    • 14
    2
    votes
    1 answer

    routerLinkActive class dosen't apply if there is already a class present to that component

    I came across a wired problem where I have an angular material sidebar and in that I have buttons used for routing the applications let me put the code below
    2
    votes
    0 answers

    How to make RouterLinkActive got an access to RouterLink which is provided within ng-template

    Is there any way to provide an access to ContentChildren which are inside ng-template? If you look at the example you see the issue - the routerLinkActive directive does not see any routerLink directives in the second row.
    constantant
    • 1,192
    • 1
    • 13
    • 25
    2
    votes
    3 answers

    Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?

    I'm using Angular 6 and I've ran into an issue regarding my navigation menu. When I click on a child-item, only the child item is set to active and not the parent when using routerLinkActive. I'm wondering how I could set the parent item class to…
    leonardofjr
    • 103
    • 1
    • 2
    • 10
    2
    votes
    0 answers

    Angular routerLinkActive undefined after refresh with parameter

    I'm working with Angular 5, my routerLinkActive doesn't work and displays that my parameter is undefined after I refresh the page. This is my routes: const childRoutes: Routes = [ { path: '', data: { expectedRole: 'ADMIN' }, canActivate:…
    Pmb
    • 39
    • 5
    2
    votes
    2 answers

    RouterLinkActive is not set after reloading a page

    I am working with routing and navigation. I am using [routerLinkActive]="['active']" to make a link active. It works fine when I navigate to other route. But when current page is refreshed, 'routerLinkActive' is not working and no link is active. I…
    Aakriti.G
    • 656
    • 1
    • 10
    • 26
    1
    2 3 4