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;
}

Somatology

where do you apply the class1 class? – Z

you could check against the active route? then apply the class acordingly? – Z

Answer 1

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>

Hiragana

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? – Hiragana

#49746774 – Hiragana

blog.angularindepth.com/… – Hiragana

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 – Z

What do you mean by "not a directive"? RouterLinkActive is a directive and it has exportAs: 'routerLinkActive' which you can use to access its directive-specific properties. Read the examples in official docs. – Hiragana

i never said RouterLinkActive wasnt a directive, i said that #..... isnt a directive, its an identifier – Z

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. – Hiragana

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 – Z

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. – Hiragana

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 – Z

Answer 2

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.

Saskatoon

Answer 3

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>

Lambertson

Answer 4

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

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

Jumpoff

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. – Forefront