Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?

Question

I'm using Angular 6 and I've ran into an issue regarding my navigation menu.

When I click on a child-item, only the child item is set to active and not the parent when using routerLinkActive.

I'm wondering how I could set the parent item class to active when selecting its child item in Angular 6?

Lets say I click Floor Maintenance which is the child of Services. Only Floor Maintenance will be set to active but not Services. I'd like to have the Services Button active using routerLinkActive when clicking any of its child items.

Navigation Menu

<nav class="navbar navbar-expand-lg navbar-light bg-white thick-border-bottom">
  <div class="container">
  <a class="navbar-brand" routerLink=""><img id="logo" class="img-fluid" src="./assets/logo.svg" alt=""></a>
  <button class="navbar-toggler my-3" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]={exact:true}>Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>

        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" routerLink="services" routerLinkActive="active" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
            Services
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLink="services/janitorial-services" routerLinkActive="active">Janitorial Services</a>
            <a class="dropdown-item" routerLink="services/floor-maintenance" routerLinkActive="active">Floor Maintenance</a>
            <a class="dropdown-item" routerLink="services/green-cleaning-services" routerLinkActive="active">Green Cleaning</a>
          </div>
        </li>

      <li class="nav-item">
        <a class="nav-link" routerLink="/our-difference" routerLinkActive="active">Our Difference</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/our-clients" routerLinkActive="active">Our Clients</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact" routerLinkActive="active">Contact</a>
      </li>
    </ul>
  </div>
  </div>

</nav>

Routing Module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './frontend/pages/about/about.component';
import { HomeComponent } from './frontend/pages/home/home.component';
import { ServicesComponent } from './frontend/pages/services/services.component';
import { JanitorialServicesComponent } from './frontend/pages/services/subpages/janitorial-services/janitorial-services.component';
import { ServiceAreasComponent } from './frontend/pages/service-areas/service-areas.component';
import { OurClientsComponent } from './frontend/pages/our-clients/our-clients.component';
import { ContactComponent } from './frontend/pages/contact/contact.component';
import { FloorMaintenanceComponent } from './frontend/pages/services/subpages/floor-maintenance/floor-maintenance.component';
import { GreenCleaningServicesComponent } from './frontend/pages/services/subpages/green-cleaning-services/green-cleaning-services.component';
import { OurDifferenceComponent } from './frontend/pages/our-difference/our-difference.component';

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'services', component: ServicesComponent, 
    children: [
      {path: "janitorial-services", component: JanitorialServicesComponent},
      { path: "green-cleaning-services", component: GreenCleaningServicesComponent},
      { path: "floor-maintenance", component: FloorMaintenanceComponent}
    ] 
  },
  { path: 'our-difference', component: OurDifferenceComponent },
  { path: 'our-clients', component: OurClientsComponent },
  { path: 'contact', component: ContactComponent }
];
@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes)],
})


export class AppRoutingModule { }

Answer 1

So when I compared my code to https://stackblitz.com/edit/parent-child-active?file=src%2Fapp%2Fapp.component.css this.

The only difference I could find is that the routerLinks and routerLinkActive attributes that I was set to the a tags.

So i decided to to structure it like this instead:

<ul>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a href="#" routerLink="/">Home</a>
  </li>
  <li  routerLinkActive="active">
    <a href="#" routerLink="/parent">Parent Component</a>
    <ul>
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a href="#" routerLink="/parent/child">Child Component</a>
      </li>
    </ul>
  </li>

</ul>

Answer 2

If you want the parent class to remain active while the child class is too, you need to set the routerLink for the child as /parent/child. If the beginning of the active routerLink matches exactly another one, both will become active:

<div>
    <a routerLink="/Parent" routerLinkActive="active">Parent</a>
    <a routerLink="/Parent/Child" routerLinkActive="active">Child</a>
</div>