javascriptangularangular7mean-stack

Angular-7 active link on tab is not working?

I have 4 icons on which i'm trying for active link like this -[![like yellow active tab][1]][1] but it's not working don't know why i guess i'm missing some steps also when i'm changing router i need to highlight that router tab. Here is my .Html file for one module -( i only made changes in .html not .ts file)

 <div class="smart-manage">
 <a routerLink="/dashboard" class = "active" routerLinkActive = "active"[routerLinkActiveOptions]="{exact: true}" >
              <span data-toggle="tooltip" title="Smart Dashboard" data-placement="right">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
                                20 20" width="20" height="20">
Solution

  • Take your code:

     <a routerLink="/dashboard" class="active" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

    When the url is '/dashboard', the active class will be added to the a tag. If the url changes, the class will be removed.

    Problem: You add the class anyway with class="active"

    Try:

    <a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

    With styles:

    .active { color: red; }

    The a tag text will be red on active.