Angular routerLinkActiveOptions

Question

I have some links like this

    <li routerLinkActive="active" class="nav-item">
    <a [routerLink]="['contracts']" 
    [queryParams]="{ activeOnly: false }" 
    class="nav-link">Contracts</a>
    </li>

You see here in params I have ?activeOnly=false with this approach everything is okay when my URL is like contracts?activeOnly=false. Then the active CSS class is added in the HTML and the user can see that it is the active link.

The problem I have is that sometimes the URL can be changed like this contracts?activeOnly=true&id=1 then the active CSS does not apply anymore.

What I need is to have the active CSS class on element even if the URL has changed with the query parameters.

For example, if the URL is like this contracts?activeOnly=true&id=1, then the active CSS class must also stay on li HTML tag.

Answer 1

Path: '/' Component: HomeComponent
Path: '/server' Component: ServerComponent
Path: '/about' Component: AboutComponent

---

HOME SERVER ABOUT

Default home will be selected, now if you navigate to server

HOME SERVER ABOUT

Both HOME and SERVER will become active

WHY?

Because in localhost:4200/server there is an empty path between localhost:4200 and server and that is / that will keep home tab also active.

Therefore in order to deal with it you use [routerLinkActiveOptions]="{exact : true}" with home tab. Now if you navigate to server, only server tab will be highlighted