Add Active class for multiple routes in Angular

Question

I have a side bar which has multiple option in it.I set routerLinkActive class to make particular option active when click but now if I go deeper or other route from that route,the active class is being removed.I wanted to stay one option active for multiple routes. My HTML code is as per below.

 <div class="nav-list">
        <ul class="listing" >
             <li routerLinkActive="active"  [routerLinkActiveOptions]="{exact: true }" >
                <a  [routerLink]="['/']" (click)="disableOptions()" >
                    <i class="fas fa-archive"></i> Projects
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{  exact: true }" [class.disabled]="isDisabled==true">
                <a [routerLink]="['/notebooks']" [style.pointer-events]="isDisabled ? 'none' : 'auto'" >
                    <i class="fas fa-book"></i> Notebooks
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" [class.disabled]="isDisabled==true" >
                <a [routerLink]="['/files']" [style.pointer-events]="isDisabled ? 'none' : 'auto'">
                    <i class="fas fa-file-alt"></i> Files
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" [class.disabled]="isDisabled==true">
                <a [routerLink]="['/screens']" [style.pointer-events]="isDisabled ? 'none' : 'auto'">
                    <i class="fas fa-desktop"></i>Screen
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" [class.disabled]="isDisabled==true">
                <a  [routerLink]="['/slides']" [style.pointer-events]="isDisabled ? 'none' : 'auto'">
                    <i class="fas fa-photo-video"></i> Slides
                </a>
            </li>
        </ul>

    </div>

As you can see in first image the route is ['/'] so the active class working fine but in second image the route is ['project/create'] so that the active class is not showing.I want to keep active class for both routes .Please help me to solve this issue.Thank you

My route file is like this.

const routes: Routes = [{
    path: '',
    component: PagesComponent,
    canActivate: [AuthGaurdService],
    children: [{
        path: '',
        component: ProjectListingComponent,

    }, {
        path: 'slides',
        component: ScreenListingComponent,

    }, {
        path: 'project',
        loadChildren: './multi-step-form/multistepform.module#MultistepformModule',
    }, {
        path: 'project/slide/create',
        component: AddEditScenarioComponent
    },
    {
      path: 'project/slide/edit',
      component: DragDropToolScenarioComponent
    },
    {
      path: 'notebooks',
      component: NotebookListingComponent
    },
    {
      path: 'screens',
      component: ScreenTableComponent
    },
    {
      path: 'files',
      component: FileListingComponent
    },
    {
      path: 'screens/create',
      component: ScreenCreateComponent
    },
    {
      path: 'files/create',
      component: FileCreateComponent
    },
    {
      path: 'notebook/create',
      component: NotebookCreateComponent
    }
]
}];

['project/create'] is in multistepform component which has its own routing file.

The main issue is that you probably set the routes wrong. Route / never be the same as `/project/create`. So I think you should have a redirect to `/project` for the "default" url and the rest should work with `routerLinkActive` automatically. — standby954, Jul 31 '19 at 09:15
@standby954 I added my rout file.Can you please check it now and suggest me solution according to that — Annonymous, Jul 31 '19 at 12:20

Felix Lemke · Answer 1 · 2019-07-31T15:29:15.700

2

You can use nested routing for it. For example define your routes as

routes: Route[] = [
  { path: '', component: PagesComponent, children: [
    { path: 'project', component: ProjectComponent, children: [
      { path: 'slide/create', component: CreateProjectComponent }
    ]}
  ]}
];

And then you can have a <router-outlet> inside the PagesComponent and the ProjectComponent. The routerLinkActive will then react to the project/** route in the PagesComponent so it does not matter what follows. The routerLinkActive in the ProjectComponent will then be active for project/slide/create or whatever you route to. And I think you do not need the routerLinkActiveOptions.

edited Jul 31 '19 at 15:29

answered Jul 31 '19 at 09:21

Felix Lemke

6,189
3
40
67

Hi ,I added my route file code in question.can you please check that and suggest me solution – Annonymous Jul 31 '19 at 12:20
I've updated my answer, do you mind to create a stackblitz for it? – Felix Lemke Jul 31 '19 at 15:29
Thank you ngfelixl for your answer,actually I used routelinkActiveOptions because the ['/'] route option is always staying active .Because its a root route.I dont know other way to overcome that issue so that I used routerlinkActiveoption – Annonymous Aug 01 '19 at 04:54

Add Active class for multiple routes in Angular

1 Answers1