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

score 10 · Accepted Answer · edited Nov 05 '18 at 10:59

10

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>

edited Nov 05 '18 at 10:59

answered Nov 05 '18 at 10:27

Keryanie

721
6
18

1

As a newcomer, you should know that instead of duplicating an answer, you should instead upvote the one already existing. – Nov 05 '18 at 10:43
Sorry but we submit the answer at the same time. So I didn't see you answer. – Keryanie Nov 05 '18 at 10:56
1

Indeed, my bad on this one, I'm removing the downvote (and my answer too, I'll upvotes yours, I don't need the reputation) – Nov 05 '18 at 10:57

score 0 · Answer 2 · answered Dec 28 '21 at 08:43

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

score 0 · Answer 3 · answered Dec 28 '21 at 08:55

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>

score 0 · Answer 4 · answered Mar 25 '22 at 09:39

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>

on router link active change icon

4 Answers4