Side nav item not active on initial load

Hello Damian, thank you for verifying that routerLinkActive works as it should on your end. I have added the additional styles which are responsible for highlighting an active link within the global styles.scss stylesheet.

.side-nav {

.collapsible { .card { .card-header { a { &:hover { background-image: linear-gradient(to right, rgba(88,89,91,1) 0%,rgba(136,138,140,0) 100%); } } } &.active {

mdb-accordion-item-head { background-image: linear-gradient(to right, rgba(88,89,91,1) 0%,rgba(136,138,140,0) 100%);

    }
    .card-header {
      a {
        h5 {
          font-weight: 300;
        }
      }
    }
    .dark-link {
      color: #E3E5E7;
    }
  }
}

} }

These styles work when the links have been clicked I'm just not getting an active link on the initial load. May I see how routerLink and routerLinkActive were implemented on your end to verify?

Sure, please take a look at the below code:

.html:

<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true">

    <mdb-navbar-brand>
      <!-- Logo -->
      <li>
        <div class="logo-wrapper waves-light">
          <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
        </div>
      </li>
      <!--/. Logo -->
    </mdb-navbar-brand>

    <links>
      <!--Social-->
      <li>
        <ul class="social">
          <li><a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
          <li><a class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
          <li><a class="icons-sm gplus-ic"><i class="fab fa-google-plus"> </i></a></li>
          <li><a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
        </ul>
      </li>
      <!--/Social-->
      <!--Search Form-->
      <li>
        <form class="search-form" role="search">
          <div class="form-group md-form mt-0 pt-1" mdbWavesEffect>
            <input type="text" class="form-control" placeholder="Search">
          </div>
        </form>
      </li>
      <!--/.Search Form-->
      <!-- Side navigation links -->
      <li>
        <ul class="collapsible collapsible-accordion">
          <mdb-accordion [multiple]="false" aria-multiselectable="false">

            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect><i class="fas fa-chevron-right"></i> Collapsible menu
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" routerLink="test-route" routerLinkActive="active" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" mdbWavesEffect>Link 2</a></li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Simple link -->
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect><i class="far fa-hand-pointer"></i> Simple link
              </mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect><i class="far fa-eye"></i> Collapsible menu 2
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" mdbWavesEffect>Link 2</a></li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Simple link -->
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect><i class="far fa-gem"></i> Simple link 2</mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>

          </mdb-accordion>
        </ul>
      </li>
      <!--/. Side navigation links -->
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>
  <!--/. Sidebar navigation -->

  <!-- Navbar -->
  <mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"
              [containerInside]="false">

    <navlinks class="navbar-container">
      <!-- SideNav slide-out button -->
      <div class="float-left">
        <a (click)="sidenav.show()" class="button-collapse"><i class="fas fa-bars"></i></a>
      </div>
      <!--/. SideNav slide-out button -->
    </navlinks>

    <mdb-navbar-brand>
      <!-- Breadcrumb-->
      <div class="breadcrumbs breadcrumb-dn mr-auto">
        <p>Material Design for Bootstrap</p>
      </div>
      <!--/. Breadcrumb-->
    </mdb-navbar-brand>

    <navlinks>
      <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="fas fa-envelope"></i> <span
            class="clearfix d-none d-sm-inline-block">Contact</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="far fa-comments"></i> <span
            class="clearfix d-none d-sm-inline-block">Support</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect><i class="fas fa-user"></i> <span
            class="clearfix d-none d-sm-inline-block">Account</span></a>
        </li>
        <li class="nav-item dropdown btn-group" dropdown>
          <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
            Dropdown
          </a>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </navlinks>
  </mdb-navbar>
  <!--/. Navbar -->

</header>
<!--/.Double navigation-->

<!--Main Layout-->
<main>
  <div class="container-fluid mt-5">
    <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
    <br>
    <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
    <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
    <div style="height: 2000px"></div>
  </div>
</main>
<!--/Main layout-->

.scss:

mdb-accordion-item-head.active a h5 {
  color: red !important;
  background-color: yellow !important;
}

// Change nested active links appearance
mdb-accordion-item-body a.active {
  color: red !important;
  background-color: yellow !important;
}

.app.module.ts:

const routes: Routes = [
  {path: 'test-route', component: AppComponent}
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModulesPro.forRoot(),
    ToastModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  providers: [MDBSpinningPreloader, ToastService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Please notice, that I have only added routerLink and routerLinkActive to the first link in the first accordion.

Please copy this code into your app, and open browser at localhost:4200/test-route, and you'll see that the first link is highlighted.

Best Regards,

Damian

Thanks Damian. Yes, that works as it should on my side also. But do you get the same results when implementing routerLinkActive in the accordion below?

<mdb-accordion-item class="no-collase">
                 <mdb-accordion-item-head mdbWavesEffect>
                       <mdb-icon fas icon="fas fa-home" class="mr-1 dark-link"></mdb-icon>
                       <span class="dark-link">Home</span>
                 </mdb-accordion-item-head>
                 <mdb-accordion-item-body>
                 </mdb-accordion-item-body>
              </mdb-accordion-item>

Dear @tmeyer@suddath.com

The below code works for me fine. Please try to add the routerLink and routerLinkActive directives on the mdb-accordion-item-head element:

<mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect routerLink="test-route" routerLinkActive="active"><i class="far fa-hand-pointer"></i> Simple link
              </mdb-accordion-item-head>
              <mdb-accordion-item-body ></mdb-accordion-item-body>
            </mdb-accordion-item>

Best Regards,

Damian