Stylování aktivních odkazů v Angular

Lze zařídit, aby odkazy, jejichž URL odpovídá adresnímu řádku, byly zvýrazněny nějakým stylem, například barvou. K tomu má Angular připravený speciální atribut RouterLinkActive.

Podívejme se, jak funguje. Pro začátek jej importujeme:

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

Propíšeme v dekorátoru:

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

A nyní přidáme tento atribut k našim odkazům:

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 vidíte, v našem příkladu je hodnotou atributu active. To je jméno CSS třídy, která bude přiřazena aktivnímu odkazu. Nyní je můžeme stylovat, jak chceme:

css.active {
  color: red;
}