Add Active class for multiple routes in Angular - html

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.

Answer 1

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.