css Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

2

Answers


  1. 0

    You can pass in a route from anywhere. However, if you want Angular to apply the routerLinkActive when that route gets activated, you need to ensure that you pass in an absolute path (starts with a /) to routerLink.

    Tailwind should work file with routerLinkActive

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search