CODEWITHSUNDEEP
angularangular-ui-routerangular2-routingangular5
roopteja
roopteja

Reputation: 743

How to add routelink active to child routes also

I have a html file as follows.

 <ul class="nav side-menu">
                <li routerLinkActive="active">
                  <a routerLink="Teachers/AllTeachers">
                    Teachers 
                  </a>
                </li>
 </ul>

In this html file i.e in teacher.component.ts i am redirecting to all teachers component as shown abouve. In my app.routing.ts my routes are as follows.

    const routes: Routes = [
        { path: '', component: LoginComponentComponent },
        {
            path: 'Dashboard', component: SidebarComponent, canActivate: [OnlyLoggedInGuard],
            children: [
                { path: 'Teachers/AllTeachers', component: AllTeachersComponent},
                { path: 'Teachers/AddTeacher', component: AddTeacherComponent},
]
},

now i have to navigate from all teachers to add teacher from all teachers component .I am doing it by clicking another button. But on doing this the routerlink active is not working it is not applying the active class to html.I need to keep the li active as long as it is there in teachers.

Upvotes: 0

Views: 4342

Answers (3)

Rafi Henig
Rafi Henig

Reputation: 6414

You should use relative path, to let Angular know it's a relative path, as shown in the code below :

              <a routerLink="./AllTeachers">

Upvotes: 0

Bahman
Bahman

Reputation: 1064

Here is a sample that I created for you:

https://stackblitz.com/edit/angular-gx5ovm

I think the trick is moving routerLinkActive="active" to the parent ul instead of li. If you want to have it on the li elements then you have to put routerLinkActive="active" on each one of the li elements.

This is from Angular documentation:

you can apply the RouterLinkActive directive to an ancestor of a RouterLink.

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

https://angular.io/api/router/RouterLinkActive#description

UPDATE: Is this what you are after?

https://stackblitz.com/edit/angular-hvnczx

Upvotes: 2

Yerkon
Yerkon

Reputation: 4788

Code example Updated @Bahman code example. Just simply add routerLinkActive="active" to routerLink directives.

 <ul class="nav side-menu" routerLinkActive="active">
                <li>
                  <a routerLink="/Dashboard/Teachers/AllTeachers" >
                    All Teachers 
                  </a>
                </li>
                ...
 </ul>

routerLinkActive directive shoulde be together with routerLink:

   <ul class="nav side-menu" >
                <li>
                  <a routerLink="/Dashboard/Teachers/AllTeachers" routerLinkActive="active">
                    All Teachers 
                  </a>
                </li>
                <li>
                  <a routerLink="/Dashboard/Teachers/AddTeacher" routerLinkActive="active">
                    Add Teachers 
                  </a>
                </li>
 </ul>

CODE EXAMPLE 3

Upvotes: 1

Related Questions