Angular routerLinkActive for multiple paths

Question

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:

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/entity/teacher']">Teacher</a>
</li>

the Code above activates the menu item nicely for `/entity/teacher/add' and more

Problem is, I've got a Kind of 'catch-all' navigation item which contains things which do not line up:

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/config']">Configuration</a>
</li>

I want this item to highlight for the paths /tasks and /entity/settings, too, not only for /config.

Problem is, I can't change the routing of the app. How do I get the menu item to line up for other routing paths as well as the one in the routerLink?

Teddy Sterne · Accepted Answer · 2018-03-05 16:04:16Z

36

You can use a template reference variable to get a reference to the outer routes and then apply the class when they are active. You can either link them to an existing routerLinkActive element or to a hidden one. Here is an example using the hidden method.

<li routerLinkActive="active" [ngClass]="{'active': tasksActive.isActive || settingsActive.isActive }">
  <a [routerLink]="['/config']">Configuration</a>
</li>
<a routerLink="/tasks" routerLinkActive #tasksActive="routerLinkActive" style="display: none"></a>
<a routerLink="/entity/settings" routerLinkActive #settingsActive="routerLinkActive" style="display: none"></a>

answered Mar 5, 2018 at 16:04

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johan Ehlers Over a year ago

I liked this solution, but it did not quite work for my scenario (see my answer below), still voting this up, pointed me in the right direction.

yaya · Accepted Answer · 2020-08-23 09:21:33Z

9

If you're looking for how to prevent multiple links to gets active, there is a [routerLinkActiveOptions]="{exact: true}" option :

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>

answered Aug 23, 2020 at 9:21

yaya

8,3311 gold badge48 silver badges44 bronze badges

Comments

Johan Ehlers · Accepted Answer · 2023-08-02 07:33:09Z

For my scenario with a drop down menu (using an hidden *ngIf directive, i.e. tje dropdownMenu part) the template variables solution (described above by Teddy Stern) had to be modified a bit for it to work, note only one template variable:

<li class="nav-item dropdown" dropdown routerLinkActive #colActive="routerLinkActive">
    <a class="nav-link" style="padding-left: 0.25rem" dropdownToggle aria-expanded="false"
        [ngClass]="{'active': colActive.isActive }">
        <i class="fa fa-handshake"></i> Colleagues
    </a>
    <ul class="dropdown-menu" *dropdownMenu>
        <li>
            <a class="dropdown-item" [routerLink]="['user']">
                <i class="fa fa-fw fa-user"></i> Users
            </a>
        </li>
        <li>
            <a class="dropdown-item" [routerLink]="['team']">
                <i class="fa fw-fw fa-users"></i> Teams
            </a>
        </li>
    </ul>
</li>

That is because you can apply the directive to the ancestor of linked elements, see https://angular.io/api/router/RouterLinkActive#description.

Mounir bkr · Accepted Answer · 2024-01-02 03:01:43Z

0

So you should add at any link:

[routerLinkActiveOptions]="{exact: true}"

like this:

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home

answered Jan 2, 2024 at 3:01

Mounir bkr

1,82514 silver badges9 bronze badges

Comments

Manish Balodia · Accepted Answer · 2020-02-18 14:19:53Z

-1

as specified there are multiple routerLinks but only one routerLinkActive show highlight or enabled.for that this works fine for me.

<a class="nav-link" href="javascript:void(0)" routerLink='/rulesConfiguration' routerLinkActive='active' [ngClass]="{'active': createRules.isActive}"><i class="nav-icon fa fa-list-alt "></i>Rules Configuration</a>
<a class="nav-link" href="javascript:void(0)" routerLink="/createRules" routerLinkActive #createRules="routerLinkActive" style="display: none"><i class="nav-icon fa fa-list-alt "></i>Rules </a>

edited Feb 18, 2020 at 14:19

Manish Balodia

1,8752 gold badges24 silver badges38 bronze badges

answered Feb 18, 2020 at 12:08

Praneet Chaganti

11 bronze badge

Comments

Torben · Accepted Answer · 2021-11-22 12:30:31Z

-1

This works for me:

<li [routerLinkActive]="['active']">
    <a routerLink="/config">Configuration</a>
    <a routerLink="/tasks" style="display: none"></a>
    <a routerLink="/entity/settings" style="display: none"></a>
</li>

answered Nov 22, 2021 at 12:30

Torben

3771 gold badge5 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular routerLinkActive for multiple paths

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related