on router link active change icon

Question

<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}}

Answer 1

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>

Answer 2

I also searched a lot to achieve this type of functionality and finally I got this solution...

We just need to define #dashboard="routerLinkActive" and then we can get isActive in dashboard attribute...

Just check below code with cool mind! :)

<div class="top-tabs" id="app-sidebar-scrollbar">
    <div class="sidebar-item">
        <a class="sidebar-link" [routerLink]="['/worklists/dashboard']" routerLinkActive="active" #dashboard="routerLinkActive">
            <img [src]="dashboard.isActive ? 'assets/svg/sidebar-icons/dashboard-active.svg' : 'assets/svg/sidebar-icons/dashboard.svg'" />
            <span>Dashboard</span>
        </a>
    </div>
    <div class="sidebar-item">
        <a class="sidebar-link" [routerLink]="['/worklists/tasks-board']" routerLinkActive="active" #worklist="routerLinkActive">
            <img [src]="worklist.isActive ? 'assets/svg/sidebar-icons/goal-workflow-active.svg' : 'assets/svg/sidebar-icons/goal-workflow.svg'" />
            <span>Worklists</span>
        </a>
    </div>
    <div class="sidebar-item">

        <a class="sidebar-link" [routerLink]="['/assessment-requests/privacy']" routerLinkActive="active" #assessment="routerLinkActive">
            <img [src]="assessment.isActive ? 'assets/svg/sidebar-icons/assessments-active.svg' : 'assets/svg/sidebar-icons/assessments.svg'" />
            <span>Assessments</span>
        </a>
    </div>
</div>

Answer 3

Inside your HTML if given code is as below:

<a mat-list-item *ngFor="let link of links" routerLink={{link.path}} routerLinkActive="active" >
   <img  [src]="router.url === ('/' + link.path) ? link.activeIcon : link.inactiveIcon"/>         
   <p>{{ link.label }}</p>
</a>

Inside TS, give below:

links: any = [{
 inactiveIcon:'assets/images/icons/master-navigation/home-inactive.svg',
 activeIcon:'assets/images/icons/master-navigation/home-active.svg',
 label: 'Home',
 path: 'network'
}] 
constructor(public router: Router) {}

Answer 4

you can try like 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>