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

Question

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 the query parameter inside the component routerLinkActive gets unset.

So, I need to ignore the query params. But how does it work? Can anyone help me?

Here is my simple code:

<div class="col-12">
    <ul class="nav nav-pills nav-justified">
        <li class="nav-item">
            <a 
              class="nav-link" 
              routerLink="/einstellungen/allgemein"                             
              routerLinkActive="active">
              Allgemein
            </a>
        </li>
        <li class="nav-item">
            <a 
              class="nav-link" 
              [routerLink]="['/einstellungen/kalender']" 
              [queryParams]="{branch: myBranches[0].id}" 
              routerLinkActive="active"
              [routerLinkActiveOptions]="{exact: false}">
              Kalender verwalten
           </a>
        </li>
        <li class="nav-item">
            <a 
              class="nav-link" 
              *ngIf="user.is_admin" 
              routerLink="/einstellungen/filialen" 
              routerLinkActive="active">
              Filialen verwalten
            </a>
        </li>
    </ul>
</div>

score 19 · Accepted Answer · answered Aug 27 '18 at 11:18

19

RouteLinkActive will work only with exact query params. You may try passing {exact: false} as routerLinkActiveOptions. If that doesn't work

You can call a function inside [class.active] attributes.

<a class="nav-link" [routerLink]="['/einstellungen/kalender']" [queryParams]="{branch: myBranches[0].id}" [class.active]="isLinkActive('/my-link')">Kalender verwalten</a>

isLinkActive(url): boolean {
   const queryParamsIndex = this.router.url.indexOf('?');
   const baseUrl = queryParamsIndex === -1 ? this.router.url : 
   this.router.url.slice(0, queryParamsIndex);
   return baseUrl === url;
}

answered Aug 27 '18 at 11:18

Suresh Kumar Ariya

9,516
1
18
27

thanks for your help. Unfortunately it seems to be a bit cumbersome way. But it works! – Sebastian S Aug 27 '18 at 11:35
1

Adding `[routerLinkActiveOptions]="{exact: false}"` worked for me. Thanks! – Baras Nov 16 '21 at 10:09
2

You can try to input an `IsActiveMatchOptions` object to the `RouterLinkActive` (https://angular.io/api/router/RouterLinkActive#properties) and adjust `queryParams: 'exact' | 'subset' | 'ignored'` - hope it helps someone – angellica.araujo Jul 18 '23 at 11:19

score 2 · Answer 2 · edited Aug 27 '21 at 21:02

2

In the component.ts:

withoutQueryParams$: Observable<boolean>;

ngOnInit() {
    this.withoutQueryParams$ = this.route.queryParams.pipe(
        map(params => Object.keys(params).length === 0)
    );
}

In the template.html:

[routerLinkActiveOptions]="{ exact: withoutQueryParams$ | async }"

edited Aug 27 '21 at 21:02

Salahuddin Ahmed

4,854
4
14
35

answered Aug 26 '21 at 20:22

unixxx

53
5

This should be the accepted answer. All other answers replace```routerLinkActive``` with ```[class.active]```. – parliament Feb 23 '23 at 08:11

score 0 · Answer 3 · answered Feb 22 '19 at 14:23

0

Using a hidden anchor tag and an html template variable:

<a [routerLink]="/einstellungen/kalender" routerLinkActive="" #rla="routerLinkActive" hidden></a>
<a 
   class="nav-link" 
   [routerLink]="['/einstellungen/kalender']" 
   [queryParams]="{branch: myBranches[0].id}" 
   [class.active]="rla.isActive">
   Kalender verwalten
 </a>

answered Feb 22 '19 at 14:23

Cameron Burger

79
1
1

This works, thank you. How to deal with more than a link? Have I to create an hidden `a` for every link and multiple `#rla` (#rla1, #rla2 and so on)? – smartmouse May 24 '19 at 09:37

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

3 Answers3

Linked