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}}
{{menuItem.icon}}
{{menuItem.iconAtv}}
Discussion on Reddit: https://www.reddit.com/r/Angular2/comments/gtaimq/question_how_to_change_the_icon_if_the_router/
You can use the #rla="routerLinkActive" routerLinkActive="active" and access the one of its properties isActive like below example:
#rla="routerLinkActive" routerLinkActive="active"
isActive
<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>