<div *ngFor=let item of item >
      <img  src="./assets/img/thumb-up.png"/>
    </div>

here is the loop by which the list of images created i only want to change the only image on which the mouse is hove i have tried <img [src]="source" on-mouseover="changeimage()"/> but it changes the whole list images So whats the solution for this

<div *ngFor=let item of item >
      <img  src="./assets/img/thumb-up.png"/>
    </div>

here is the loop by which the list of images created i only want to change the only image on which the mouse is hove i have tried <img [src]="source" on-mouseover="changeimage()"/> but it changes the whole list images So whats the solution for this

• javascript
• angular
• typescript
• angular2-template
• angular2-directives

Share Follow edited May 13, 2017 at 12:46 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked May 13, 2017 at 12:44 HASSAN MEHMOODHASSAN MEHMOOD 35322 gold badges55 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

<div *ngFor="let item of items; let i=index" >
  <img  [src]="over[i] ? './assets/img/thumb-up.png' : './assets/img/other.png'" 
        (mouseover)="over[i] = true"
        (mouseout)="over[i] = false">
</div>

over needs to be an array of bool of the same length as items

over:boolean[];

constructor() {
  this.items = ...
  this.over = new Array(this.items.length);
  this.over.fill(false);
}

Use directive to change to picture

https://plnkr.co/edit/e3JzzgZmNxYHQITnGMj6

 @Directive({selector: '[changePic]'})
  export class ChangePic {
    unsubscribe;

    constructor(private el:ElementRef, private renderer: Renderer2){
     this.unsubscribe = this.renderer.listen(this.el.nativeElement, "mouseenter", event => {
        this.el.nativeElement.src = 'https://www.petfinder./wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463-632x474.jpg';
      });
    }
  }

  @Component({
    selector: 'my-app',
    template: `
       <div *ngFor="let item of items" >
        <img  width="100px" changePic src="https://www.royalcanin./~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx"/>
      </div>
    `,
  })
  export class App {
    items = [1,2,3];

    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }

As in new versions of Angular 11 and 12 YOU CAN'T change variables directly in the template like this:

<div *ngFor="let item of items; let i=false" >
  <img  [src]="i ? './assets/img/thumb-up.png' : './assets/img/other.png'" 
        (mouseover)="i = true"
        (mouseout)="i = false">
</div>

Therefore you should have an object constructed in order to use it and change it like Günter Zöchbauer suggested:

<div *ngFor="let item of items; let i=index" >
  <img  [src]="over[i] ? './assets/img/thumb-up.png' : './assets/img/other.png'" 
        (mouseover)="over[i] = true"
        (mouseout)="over[i] = false">
</div>

Add this to your TypeScript File:

over: [];
this.over = new Array(this.items.length);
this.over.fill(false);