CODEWITHSUNDEEP
htmlcssangularrouterlinkactive
Annonymous
Annonymous

Reputation: 45

Add Active class for multiple routes in Angular

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>

Image 1 Image 2

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.

Upvotes: 1

Views: 1251

Answers (1)

Felix Lemke
Felix Lemke

Reputation: 6488

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.

Upvotes: 2

Related Questions