How to change the icon if the router link is active in Angular 9
I want to change the icon without using any script if the router link is active
<div *ngFor="let menuItem of menuItems">
<a routerLink="{{menuItem.link}}" routerLinkActive="active">
<img src="{{menuItem.icon}}" alt="{{menuItem.name}}" />
<p>{{menuItem.name}}</p>
</a>
</div>
On router link active, I want to change {{menuItem.icon}}
to {{menuItem.iconAtv}}
You can use the #rla="routerLinkActive" routerLinkActive="active"
and access the one of its properties isActive
like below example:
<div *ngFor="let menuItem of menuItems">
<a routerLink="{{menuItem.link}}" #rla="routerLinkActive" routerLinkActive="active">
<img [src]="rla.isActive ? menuItem.iconAtv : menuItem.icon"/>
<p>{{menuItem.name}}</p>
</a>
</div>
pre
& code
tags ):
Discussion on Reddit: https://www.reddit.com/r/Angular2/comments/gtaimq/question_how_to_change_the_icon_if_the_router/