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.

Continue reading...