Stylizacja aktywnych linków w Angular

Można sprawić, aby linki, których URL pasuje do paska adresu, były wyróżnione jakimś stylem, na przykład kolorem. W tym celu Angular przewiduje specjalny atrybut RouterLinkActive.

Przyjrzyjmy się, jak to działa. Na początek go zaimportujmy:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

Wpiszmy w dekoratorze:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

A teraz dodajmy ten atrybut do naszych linków:

app/app.component.html<nav>
  <a
    routerLink="/aaaa-component"
    routerLinkActive="active"
  >
    Aaaa Component
  </a>
  <a
    routerLink="/bbbb-component"
    routerLinkActive="active"
  >
    Bbbb Component
  </a>
</nav>

Jak widać w naszym przykładzie, wartością atrybutu jest active. To jest nazwa klasy CSS, która będzie nadawana aktywnemu linkowi. Teraz możemy je stylizować według własnego uznania:

css.active {
  color: red;
}