Sahil Pal asked 4 months ago
router link
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}}
1 Answers
Rehmaanali Staff answered 4 months ago
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>
Discussion on Reddit: https://www.reddit.com/r/Angular2/comments/gtaimq/question_how_to_change_the_icon_if_the_router/