angulartypescriptrouterlinkangular-routerlinkrouterlinkactive

on router link active change icon

<div class="menuItem mb-3" *ngFor="let menuItem of menuItems">
    <a routerLink="{{menuItem.link}}" routerLinkActive="active">
        <img src="{{menuItem.icon}}" alt="{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
    </a>
</div>

On router link active, I want to change {{menuItem.icon}} to {{menuItem.iconAtv}}

Solution

  • Try this: 

    <a routerLink="{{menuItem.link}}" routerLinkActive="active"  #rla="routerLinkActive">
        <img src="{{rla.isActive ? menuItem.icon : menuItem.iconAtv}}" alt="{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
 </a>