CODEWITHSUNDEEP
angulartypescript
jcdsr
jcdsr

Reputation: 1151

How to detect mouseleave() on two elements at once? Angular4

How or what will be the equivalent of doing something like this in angular4? how can we add multiple elements like in jquery? I try the settimeout in angular4, but for some reason doesn't work. Any ideas?

http://jsfiddle.net/pFTfm/195/

            var count = 0;
            var tolerance = 500;
            $('#d1, #d2').mouseenter(function(){
                count++;
                $('#d3').show();
            }).mouseleave(function(){
                count--;
                setTimeout(function () {
                    if (!count) {
                    $('#d3').hide();
                    }
                }, tolerance);
            });

in angular

isMouseEnter(e:number){
    this.dropdownId = e;
    this.toogleDropdown = true;

}

hideDropdown(){
    setTimeout(() => {
        if(!this.overElement){
            this.toogleDropdown = false;
        }
        else{
            this.toogleDropdown = true;
        }
    }, 100);

}

Upvotes: 0

Views: 695

Answers (2)

Sharma Vikram
Sharma Vikram

Reputation: 2470

Here is the running code sample example

Html 

 <div id="d1" (mouseenter)="mouseEnter('A')" (mouseleave)="mouseLeave('A')">div 1</div>
<div id="d2" (mouseenter)="mouseEnter('B')" (mouseleave)="mouseLeave('B')">div 2</div>
<div id="d3" [ngClass] ="{'hideDiv': div3}">
  div 3
</div>

CSS

   p {
  font-family: Lato;
}
#d1 {
    width: 250px;
    height: 200px;
    background: red;
    display: block;
}

#d2 {
    width: 250px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 150px;
    left: 150px;
    display: block;
}

#d3 {
    position: absolute;
    top: 400px;
    background: green;
    width: 100px;
    height: 100px;
}
.hideDiv {
  display: none;
}

Typescript Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 div3: boolean = true;
  public mouseLeave(type) {
      if(type == 'A' || type == 'B') {
        this.showDiv(true);
      }
  }

  public mouseEnter(flag) {
    if(flag == 'A' || flag == 'B') {
        this.showDiv(false);
      }
  }

  public showDiv(flag) {
    setTimeout(() => {
      this.div3 = flag;
        }, 100);
  }
}

Thanks

Upvotes: 3

rrd
rrd

Reputation: 5957

I suggest you use @HostListener and then use the $event.target to differentiate between your two elements:

@HostListener('mouseleave', ['$event.target'])
onLeave(): void {
  // Use your $event.target to differentiate the elements, then do actions
  // based on this.
}

Upvotes: 0

Related Questions