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 To Implement Edit, Update And Discard Functions In Angular Material Table(mat-table)
• 
  How To Use Roundsliderui In Angular 6
• 
  Ngif Sometimes Doesn't Work Properly Using 2 Condition
• 
  How Do I Put A Line Under A Button When Its Selected?