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