1

I want to style the css and add class when a link is active using routerLinkActive. I have tried in bootstrap and it works, but then when I got the custom CSS from the front end developer, it won't add the class that states that it is active, even when the route url is match the routeLink.

I am a bit frustated and have no idea what is wrong. I expect it will add class menu-active in the anchor when the route is active.

here's my code:

sidebar.component.html

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive="menu-active">
    <i class="ti ti-anchor"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

I have tested like the code below, referenced from this question. I expect the i showed because the routerlink is active, but it doesn't, even when I am in the http://localhost:4200/dashboard.

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive #rla="routerLinkActive">
    <i class="ti ti-anchor" *ngIf="rla.isActive"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

Hope someone could clear my frustration. Thank you.

Update:

The class is not even added when I inspect the element. Here's the screenshot of it:

Helen
  • 105
  • 2
  • 12
  • Does the link work as expected? Have you checked in dev tools if the class gets applied to the anchor element? – Hinrich Sep 08 '17 at 09:52
  • @Hinrich yes the link has worked when I click on it. The class is not applied when I inspect the element. I have added the screenshot in my question update. – Helen Sep 08 '17 at 10:09
  • Looks good to me so far. Can you please also show the routing configuration? – Hinrich Sep 08 '17 at 10:39
  • The code you provided looks fine. Could you try to reproduce the problem on a playground like codepen or plunkr? – Hinrich Sep 08 '17 at 13:32
  • @hinrich I have found the solution. thank you for your help! – Helen Sep 11 '17 at 10:24

2 Answers2

0

I have found the solution. My routerLinkActive broke because I use *ngIf in my component selector. I supposed to make the navbar shown if the user had logged in, and the navbar was also a wrapper for my content. So I used *ngIf to hide the navbar if the user is not logged in. And that was where my problem start. My navbar contains sidebar and topbar, which I have merged to avoid adding *ngIf in the component selector again.

src/app/app.component.html

<app-navbar *ngIf="isLoggedIn; else loginpage"></app-navbar>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

the isLoggedIn in my code contains Boolean, whether the user has logged in or not.

The solution: every route will load the navbar, but I put the *ngIf="isLoggedIn" within the navbar divs, so if the user is not logged in, it won't show the sidebar and show the content only instead.

src/app/app.component.html

<app-navbar></app-navbar>

src/app/navbar/navbar.component.html

<div id="wrapper" [ngClass]="menu" *ngIf="isLoggedIn; else loginpage">
   <div class="side-menu" id="sidebar-wrapper" >
    // the sidebar HTML
   </div>
   <div class="wrapper-body">
       <div class="top-menu" >
        // the topbar HTML
       </div>

       <div class="content-wrapper">
          <div class="row main-content">
              <router-outlet></router-outlet>
          </div>
       </div>
    </div>
</div>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

I never thought that putting *ngIf in the component selector will waste 2-3 days of my app development. I never find in the documentation that structural directives cannot be added in component selector. Any of you find that in the documentation? Thank you for all your help guys!

Helen
  • 105
  • 2
  • 12
  • *ngIf can be used in component selectors. The problem was that you were referencing "isLoggedIn" from within the AppComponent, but that variable was not in AppComponent – Drenai Mar 05 '18 at 12:24
-1

I think the problem is the Component cannot reference the .menu-active class.

Is the class declared in sidebar.component.css or per inline css in sidebar.component.ts ?

SplitterAlex
  • 2,755
  • 2
  • 20
  • 23