Issue
I want to do router module with default route "/" as below:
const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'messages', component: MessagesComponent },
{ path: 'profile', component: ProfileComponent },
]
And I am trying apply css class to elements as below:
<a routerLink="/" routerLinkActive="activeLink">
<span>Home</span>
</a>
<a class="messages" routerLink="/messages" routerLinkActive="activeLink">
<span>Messages</span>
</a>
<a class="profile" routerLink="/profile" routerLinkActive="activeLink">
<span>Profile</span>
</a>
But when I try use routerLinkActive also other pages for example "/messages" and "/profile" take css class to and asign them. Why it take place here? What can I do to make this code correct?
Solution
Most likely you need to add [routerLinkActiveOptions]="{exact: true}"
Ref: https://angular.io/api/router/RouterLinkActive
Answered By - Halim Samy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.