Search code examples
cssangular

How to style an active router link in Angular when the route is passed as a prop?


I have a component that is a item in side navbar:

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  [routerLink]="route"
>
  <ng-icon
    class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
    [name]="icon"
  ></ng-icon>
  <p
    class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
    routerLinkActive="active-link"
  >
    {{ title }}
  </p>
</div>

thats how i use the card:

  <app-dashboard-nav-card
      [icon]="opt.icon"
      [title]="opt.title"
      [route]="opt.route"
    ></app-dashboard-nav-card>

and i want to style the active link; the route is recived as prop;

i tried:

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  [routerLink]="route"
  routerLinkActive="active-link"
>
  <ng-icon
    class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
    [name]="icon"
  ></ng-icon>
  <p
    class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
  >
    {{ title }}
  </p>
</div>

and

.active-link {
  color: red;
}

but it didnt work. How to style active router link when a route is passed as prop? Also, can I style router link using tailwind css?

i read: Active router link Angular

but it didnt help.


Solution

  • Have you tried adding the routerLinkActiveOptions? it might be that the path matching is looking for the whole path.

    https://stackoverflow.com/a/38091022/4777292