I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the component and then click on the same navigation for it to become active.
Important Note: The routerLinkActive does not seem to be functioning ONLY when I added formControlName="name" to the form. The routerLinkActive works fine when I remove it.
Can someone please help me identify what mistake I am making?
nav.component.html
<nav>
<ul class="side-nav">
<li routerLinkActive="active" tabIndex="1">
<a routerLink="/profile-details">Profile Details</a>
</li>
<li routerLinkActive="active" tabIndex="1">
<a routerLink="/profile-address">My Address</a>
</li>
<li routerLinkActive="active" tabIndex="1">
<a routerLink="/profile-card">My Cards</a>
</li>
<li routerLinkActive="active" tabIndex="1">
<a routerLink="/profile-password">Change Password</a>
</li>
<li routerLinkActive="active" tabIndex="1">
<a routerLink="/settings">Account Settings</a>
</li>
<li routerLinkActive="active" tabIndex="1">
<a routerLink="/privacy">Consent & Privacy</a>
</li>
</ul>
</nav>
nav.component.css
.active {
background-color: rgb(255, 255, 255) !important;
border-left: 8px solid rgb(0, 185, 173);
}
profile-details.component.html
<div class="profile">
<div class="row">
<!-- Profile Nav -->
<div class="col-3">
<app-nav></app-nav>
</div>
<div class="col-5 details">
<h2>Profile Details</h2>
<form class="form">
<div class="form-group">
<h6>Name: </h6>
<input type="text" id="name" name="name" formControlName="name" class="form-control" />
</div>
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</form>
</div>
</div>
</div>
app-routing.module.ts
const routes: Routes = [
{ path: 'profile', component: NavComponent },
{ path: 'profile-details', component: ProfileDetailsComponent },
{ path: 'profile-address', component: ProfileAddressComponent },
{ path: 'profile-card', component: ProfileCardComponent },
{ path: 'profile-password', component: ProfilePasswordComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'privacy', component: PrivacyComponent }
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }