Change Color Of Selected Link In Angular 4

I made a header using bootstrap 4 but I want that when I click on any link, link change its color and remains selected.

Copy

<nav><divclass="collapse navbar-collapse justify-content-end"id="nav-content"><ulclass="navbar-nav"id="nav"><liclass="nav-item"><aclass="nav-link"routerLink=""routerLinkActive="class-name"routerLinkActiveOptions="{exact:true}">About</a></li><liclass="nav-item"><aclass="nav-link"routerLink="/experience"routerLinkActive="class-name"routerLinkActiveOptions="{exact:true}">Experience</a></li><liclass="nav-item"><aclass="nav-link"routerLink="/skills"routerLinkActive="class-name"routerLinkActiveOptions="{exact:true}">Skills</a></li><ul><div><nav>

.css/.scss file

.class-name{
    color:red;
    ...
}

Solution 2:

You should use RouterLinkActive

<aclass="nav-link"routerLink="/experience"routerLinkActive="YourClass"routerLinkActiveOptions="{exact:true}">
    Experience
</a>

routerLinkActive - Assign your class. routerLinkActiveOptions="{exact:true}" - add the class when match the exact link

Share

You may like these posts

• 
  How Can I Center Text (horizontally And Vertically) Inside A Div Block?
• 
  How Do I Insert A Custom Font To Text With Css?
• 
  How Do You Apply A Gradient From Outer To Inner, Only To Borders, In Css?
• 
  How To Align Radio Buttons Horizontally Below Labels