Angular | How to define a template variable for a div

Question

The following code generates 4 200x200 divs.

I want to set a class to a div when mouse is hovering (the class should be set only to the div that is hovered, not the other three)

<style>
   div {height: 200px; width: 200px; margin: 20px;}
   .mouseover {background-color: red;}
</style>

<div *ngFor="let a of [1,2,3,4]" 
    [class.mouseover]="mouseOvered" 
    (mouseover)="mouseOvered=true" 
    (mouseleave)="mouseOvered=false">
</div>

How can this be done without defining mouseOvered in the component?

If you are simply looking at simplifying or writting less code, you could isolate this logic in a directive - though I think what you have is just fine — Damian C, Nov 11 '19 at 14:46
The problem with the above solution is that all divs will get class 'mouseover' if a single div is hovered. I think you are right about creating a custom directive. — Vingtoft, Nov 11 '19 at 14:48

Sam Herrmann · Accepted Answer · 2019-11-12T16:21:59.987

I would recommend creating a directive to isolate each instance within the ngFor:

@Directive({
  selector: '[mouseOver]'
})
export class MouseOverDirective {

  @HostBinding('class.mouseover')
  isMouseOver = false;

  @HostListener('mouseenter')
  onEnter() {
    this.isMouseOver = true;
  }

  @HostListener('mouseleave')
  onLeave() {
    this.isMouseOver = false;
  }
}

And use it as follows:

<div *ngFor="let a of [1,2,3,4]" mouseOver></div>

StackBlitz Example

Alternative

If you prefer not creating a directive, you can also use an index map to store the condition of each instance:

Component class:

export class MyExampleComponent  {

  mouseOvered: { [index: number]: boolean } = {};

}

Component Template:

<div *ngFor="let a of [1,2,3,4]; let i = index" 
    [class.mouseover]="mouseOvered[i]" 
    (mouseover)="mouseOvered[i]=true" 
    (mouseleave)="mouseOvered[i]=false">
</div>

StackBlitz Example

score 0 · Answer 2 · answered Nov 11 '19 at 15:42

0

Pure css solution, based on your code:

div {
  height: 200px; 
  width: 200px; 
  margin: 20px;
  background-color: orange;
}

div:hover {
  background-color: red;
}

Stackblitz.

answered Nov 11 '19 at 15:42

robert

5,742
7
28
37

Angular | How to define a template variable for a div

2 Answers2

Alternative