routerLinkActive route for child and parent

Question

I am trying to apply or highlight navigation routes for my menu bar with below code, what i could get is, i could able to highlight the submenu, but could not able to highlight the parent menu bar.

<li class="nav-item dropdown"><a
                        class="nav-link dropdown-toggle " id="navbarDropdownMenuLink"
                        data-toggle="dropdown" style="color: white; cursor: pointer;"
                        [routerLinkActive]="['class1']">Parent</a>
                        <div class="dropdown-menu dropdown-menu-left"
                            aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" 
                                [routerLink]="['app-child1']"
                                [routerLinkActive]="['class1']"
                                >Child 1</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" 
                                [routerLink]="['app-child2']"
                                [routerLinkActive]="['class1']"
                                >Child 2</a>
                        </div>
</li>

Css class:

.class1{
    background-color: #007bff;
}

you could check against the active route? then apply the class acordingly? — mast3rd3mon, Apr 09 '19 at 09:11

score 13 · Answer 1 · answered Apr 17 '20 at 07:07

To highlight a side menu link just add routerLinkActive="cssClassName" to the anchor elements like:

<a routerLink="/profile" routerLinkActive="cssClassName">Profile</a>
<a routerLink="/profile/details" routerLinkActive="cssClassName">Profile Details</a>

this will highlight both links if route becomes /profile or /profile/details
If you don't want to hightlight parent route when user selects profile details in this case, then just add an additional attribute to parent route i.e. 'routerLinkActiveOptions' as follows:

<a routerLink="/profile" routerLinkActive="cssClassName"
            [routerLinkActiveOptions]="{ exact: true }">Profile</a>

This is the simple way to highlight side menu links when the become activated.

score 10 · Accepted Answer · answered Apr 09 '19 at 08:32

10

You can use template reference variable (#) to get reference torouterLinkActive and its properties and then use isActive.

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" 
        id="navbarDropdownMenuLink"
        data-toggle="dropdown" 
        style="color: white; cursor: pointer;"
        [ngClass]="{'class1': child1RLA.isActive || child2RLA.isActive}">  <!-- <-- Check if child routes are active -->
            Parent
    </a>
    <div class="dropdown-menu dropdown-menu-left"
        aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" 
                [routerLink]="['app-child1']"
                [routerLinkActive]="['class1']"
                #child1RLA="routerLinkActive">          <!-- <-- Assign routerLinkActive reference to child1RLA variable -->
                    Child 1
            </a>
            <div class="dropdown-divider"></div>
                <a class="dropdown-item" 
                    [routerLink]="['app-child2']"
                    [routerLinkActive]="['class1']"
                    #child2RLA="routerLinkActive">      <!-- <-- Assign routerLinkActive reference to child2RLA variable -->
                        Child 2
                </a>
            </div>
    </div>
</li>

answered Apr 09 '19 at 08:32

Harun Yilmaz

8,281
3
24
35

What? It is not "angular id". It is template reference variable. How can you use `exportAs` of directives then? And how can I use this exact method in my project then? – Harun Yilmaz Apr 09 '19 at 08:50
https://stackoverflow.com/questions/49746274/how-to-use-exportas-in-angular-5-on-directives-to-get-its-reference-in-the-templ – Harun Yilmaz Apr 09 '19 at 08:50
https://blog.angularindepth.com/handle-template-reference-variables-with-directives-223081bc70c2 – Harun Yilmaz Apr 09 '19 at 08:50
its not a directive? and probably for the same reason people use jquery in angular projects. just because you *can* do something, doesnt mean you *should* – mast3rd3mon Apr 09 '19 at 09:08
What do you mean by "not a directive"? [RouterLinkActive](https://angular.io/api/router/RouterLinkActive) is a **directive** and it has **exportAs: 'routerLinkActive'** which you can use to access its directive-specific properties. Read the [examples](https://angular.io/api/router/RouterLinkActive#description) in official docs. – Harun Yilmaz Apr 09 '19 at 09:16
i never said `RouterLinkActive` wasnt a directive, i said that `#.....` isnt a directive, its an identifier – mast3rd3mon Apr 09 '19 at 09:18
Did you read what I wrote? I said: It is not "angular id". It is template reference variable. When did I say `#...` is a directive. It is a reference to directive. I kindly ask you to revoke the downvote because you are **totally wrong** in this situation. What I offer in the answer is a **%100 valid usage**. – Harun Yilmaz Apr 09 '19 at 09:21
but as `#...` cant be duplicated within the same html file, it is therefore also a valid identifier. how are you certain that i am the downvoter? and if you read the tooltip, voting is for usefulness, not for whether the answer is believed to be correct or not – mast3rd3mon Apr 09 '19 at 09:26
It is not duplicated. Are `#child1RLA` and `#child2RLA` duplicated? For usefulness, I already use this method to structure my main menu in my projects. Whatever... I'm done with this conversation. – Harun Yilmaz Apr 09 '19 at 09:31
i didnt say that they are duplicated, i just said that they cant be duplicated hence they are also validly used as identifiers. and to me, its people like you who ruin it because of bad answers – mast3rd3mon Apr 09 '19 at 09:36

score 4 · Answer 3 · answered Dec 12 '19 at 04:06

just put the routerLinkActive on the parent element, as described here: https://angular.io/api/router/RouterLinkActive#description

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

score 0 · Answer 4 · edited Aug 05 '22 at 06:47

0

You can use the routerLinkActive to apply the class for the active routes.

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

edited Aug 05 '22 at 06:47

rohithpoya

865
7
20

answered Aug 02 '22 at 07:18

Anuj Kumar

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 04 '22 at 12:58

routerLinkActive route for child and parent

4 Answers4