How to change image src on hover using Angular

Question

I want to change src value using mouse over events. How we can do it in angular 4 or above version? Please help me.

HTML

    <li class="ci-inline-flex ci-flt-l width100 tooltip ci-cursor" *ngFor="let menu of menuData;let i=index" [ngClass]="{'ci-bgclr-18 ci-border-radius-5': selectedItem == i, 'disabled': disabledVal == i, 'disabled': headerdisplay == false && menu.menuName == 'Encounter'}" (click)="reDirectTo(menu.route,menu.routeTyPe, menu.menuName,i)" (mouseover)='over(i)' (mouseout)='out(i)'>
                  <div class=" ci-pb-5">
                    <div class="ci-pl-20 ci-pr-20" [ngClass]="menuList ? 'ci-pt-10' : ''">
                      <div [hidden]="selectedItem == i"><img src="{{menu.icon}}"/></div>
                      <div [hidden]="selectedItem != i"><img src="{{menu.activeIcon}}" /></div>
                      <div [hidden]="menuName == 'Encounter' && menuName == 'Clinical Trials' && menuName !== 'Case Summary'" class="ci-position-absolute" 
                      style="top:-3%; left: 63%;"><img src="{{menu.betaIcon}}" />
                      </div>
                    </div>
                    <p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem == i" class="menuname_inactive">{{menu.menuText}}</p>
                    <p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem != i" class="menuname_active" >{{menu.menuText}}</p>
                  </div>                  
                      <p *ngIf="menuList" [ngClass]="{'ci-clr-1': selectedItem == i}" class="ci-sec-head ci-pt-15 ci-pb-15 ci-pl-20 ci-pr-20">{{menu.menuName}}</p>
                      <span *ngIf="tooltipView" class="ci-sec-head tooltiptext">{{menu.menuName}}</span>
                </li>

JS

Here is my json from .ts file.

    {
      "icon": '../assets/icons-set/menu-icons/casesummary_normal.svg',
      "activeIcon": '../assets/icons-set/menu-icons/casesummary_active.svg',
      "menuName": 'Case Summary',
      "route": "/app/tabs/(patientcasesummary:patientcasesummary)",
      "routeTyPe": "",
      "menuText": 'Case Summary'
    }

Edison Augusthy · Accepted Answer · 2021-09-07 12:39:13Z

1

By using mouseover() and mouseout() event on <img> like

<img [src]="myImgSrc" (mouseover)="myImgSrc = menuData.activeIcon (mouseout)="myImgSrc = menuData.icon"/>

edited Sep 7, 2021 at 12:39

Edison Augusthy

1,57119 silver badges35 bronze badges

answered Sep 7, 2021 at 11:10

Aqsa Zahid

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shirish lakhe Over a year ago

Its partially working. It works for me when i hover on menu items and once i clicked on any menu item that time also change icon and after mouse moving from clickable item then (mouseout) event is fire and again change my icon.

Edison Augusthy · Accepted Answer · 2021-09-07 10:56:34Z

0

try this

html

<img [src]="imgSrc"
           (mouseover)="imgSrc = menuData.activeIcon"
           (mouseout)="imgSrc = menuData.icon">

NB: dont forget to initialise imgSrc variable in your component

answered Sep 7, 2021 at 10:56

Edison Augusthy

1,57119 silver badges35 bronze badges

4 Comments

shirish lakhe Over a year ago

How to initialise imgSrc variable in my component?

Edison Augusthy Over a year ago

add this line in component class public imgSrc:string = this.menuData.icon

Edison Augusthy Over a year ago

@shirishlakhe pls mark it as accept answer if its working for you

shirish lakhe Over a year ago

Its partially working. It works for me when i hover on menu items and once i clicked on any menu item that time also change icon and after mouse moving from clickable item then (mouseout) event is fire and again change my icon

Amir Saadallah · Accepted Answer · 2021-09-14 11:03:19Z

It works for me with the below code. Using (mouseout)="menu.src = ''". And adding "src":"" in .ts file.

HTML

    <li style="margin-bottom: 3px;" class="ci-inline-flex ci-flt-l width100 tooltip ci-cursor" *ngFor="let menu of menuData;let i=index" 
[ngClass]="{'ci-bgclr-18 ci-border-radius-5': selectedItem == i, 'disabled': disabledVal == i, 'disabled': headerdisplay == false && menu.menuName == 'Encounter'}" 
(click)="reDirectTo(menu.route,menu.routeTyPe, menu.menuName,i,$event)" (mouseover)="menu.src = menu.activeIcon" 
(mouseout)="menu.src = ''">
    <div class=" ci-pb-5">
       <div class="ci-pl-20 ci-pr-20" [ngClass]="menuList ? 'ci-pt-10' : ''">
          <div [hidden]="selectedItem == i"><img [src]="menu.src || menu.icon"/></div>
          <div [hidden]="selectedItem != i"><img [src]="menu.src || menu.activeIcon"/></div>
          <div [hidden]="menuName == 'Encounter' && menuName == 'Clinical Trials' && menuName !== 'Case Summary'" class="ci-position-absolute" 
             style="top:-3%; left: 63%;"><img src="{{menu.betaIcon}}" />
          </div>
       </div>
       <p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem == i" class="menuname_inactive">{{menu.menuText}}</p>
       <p [ngClass]="menuList ? 'menutext' : ''" [hidden]="selectedItem != i" class="menuname_active" >{{menu.menuText}}</p>
    </div>
    <p *ngIf="menuList" [ngClass]="{'ci-clr-1': selectedItem == i}" class="ci-sec-head ci-pt-15 ci-pb-15 ci-pl-20 ci-pr-20">{{menu.menuName}}</p>
    <span *ngIf="tooltipView" class="ci-sec-head tooltiptext">{{menu.menuName}}</span>
    </li>

TS

Here is my json from .ts file.
public menuData: any = [
    {
      "icon": '../assets/icons-set/menu-icons/casesummary_normal.svg',
      "activeIcon": '../assets/icons-set/menu-icons/casesummary_active.svg',
      "menuName": 'Case Summary',
      "route": "/app/tabs/(patientcasesummary:patientcasesummary)",
      "routeTyPe": "",
      "menuText": 'Case Summary',
      "src":""
    }
]

Collectives™ on Stack Overflow

How to change image src on hover using Angular

3 Answers 3

1 Comment

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Related