CODEWITHSUNDEEP
angular
new_user503
new_user503

Reputation: 61

How to change individual mouseover and mouseout events in *ngFor?

I need to change the contents of one block when hover the mouse. all blocks are changing now

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
   public isChangedBlock = false;
   public itemPrefix: Array<string> = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    constructor() {}
}
<div *ngFor="let item  of items; let i = index"
     (mouseover)="isChangedBlock = true"
     (mouseout)="isChangedBlock = false">
   <span [hidden]="isChangedBlock">text {{itemPrefix[i]}}</span>
   <span [hidden]="!isChangedBlock">icon</span>
</div>

Upvotes: 0

Views: 1932

Answers (2)

Jitendra
Jitendra

Reputation: 316

Do Like as <div *ngFor="let item of items; let i = index" (mouseover)="isChangedBlock = i" (mouseout)="isChangedBlock = -1"> <span [hidden]="!(isChangedBlock === i)"> text {{itemPrefix[i]}}</span> <span [hidden]="!(isChangedBlock !== i)">icon</span> </div>

Upvotes: 1

Gilsido
Gilsido

Reputation: 572

Use a different boolean for each block, the easiest way is to have a key/value object with key your index and value your boolean (or use an array, but in that case you have to handle its initialisation): 

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
   public isChangedBlock = {};
   public itemPrefix: Array<string> = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    constructor() {}
}

<div *ngFor="let item  of items; let i = index"
     (mouseover)="isChangedBlock[i] = true"
     (mouseout)="isChangedBlock[i] = false">
   <span [hidden]="isChangedBlock[i]">text {{itemPrefix[i]}}</span>
   <span [hidden]="!isChangedBlock[i]">icon</span>
</div>

Upvotes: 3

Related Questions