CODEWITHSUNDEEP
angularangular-routerlink
user2000189
user2000189

Reputation: 519

routerLinkActive route for child and parent

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

Upvotes: 6

Views: 14182

Answers (4)

Anuj Kumar
Anuj Kumar

Reputation: 1

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

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

Upvotes: 0

Waleed Shahzaib
Waleed Shahzaib

Reputation: 1716

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.

Upvotes: 16

wintersocram
wintersocram

Reputation: 107

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>

Upvotes: 4

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

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>

Upvotes: 12

Related Questions