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>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Experience</a>
          </li>
          <li class="nav-item">
            <a class="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

<a class="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