CODEWITHSUNDEEP
angularangular2-routingangular17routerlinkactive
Nikita Smirnov
Nikita Smirnov

Reputation: 11

routerLinkActive is applied to every fragment (anchor) link

In my header in every link I have routerLinkActive, but the style-class is applied to every single link because, I guess, Angular doesn't care when it's fragments. Does anyone know how to apple routerLinkActive only when the fragment (anchor) link is clicked?

I expected the routerLinkActive to only be applied when I manually click the link in the header, but the routerLinkActive is applied to all links.

 <ul class="nav-links">
        <li class="nav-link-item">
          <a class="header__link" routerLink="" fragment="home" routerLinkActive="active-link">{{ 'home' | transloco }}</a>
        </li>
        <li class="nav-link-item">
          <a class="header__link" routerLink="" fragment="services" routerLinkActive="active-link">{{ 'ourServices' | transloco }}</a>
        </li>
        <li class="nav-link-item">
          <a class="header__link" routerLink="" fragment="domestic-product"  routerLinkActive="active-link">{{ 'domesticProduct' | transloco }}</a>
        </li>
        <li class="nav-link-item">
          <a class="header__link" routerLink="" fragment="we-offer"  routerLinkActive="active-link">{{ 'whatWeOffer' | transloco }}</a>
        </li>
      </ul>

import { Routes } from '@angular/router';
import { HomeComponent } from './main-layout/pages/home/home.component';
import { NotFoundPageComponent } from './shared/components/not-found-page/not-found-page.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'error', component: NotFoundPageComponent },
  { path: '**', redirectTo: 'error' },
];

Upvotes: 1

Views: 16

Answers (0)

Related Questions