How to change the icon if the router link is active in Angular 9

💬 Tech Talks › Category: Angular 10 › How to change the icon if the router link is active in Angular 9
2 Vote Up Vote Down
Sahil Pal asked 2 years 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}}

Question Tags:
Rehmaanali Staff replied 2 years ago

Discussion on Reddit: https://www.reddit.com/r/Angular2/comments/gtaimq/question_how_to_change_the_icon_if_the_router/

1 Answers
1 Vote Up Vote Down
Rehmaanali Staff answered 2 years 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>
Signup to Post Answer