CODEWITHSUNDEEP
angulartypescriptangular9
joe2020wow
joe2020wow

Reputation: 237

Angular capture events from multiple buttons into a single method

I have some code where I am trying to do something on mouseenter and do something else with every other mouse event.

Just like:

if (this.button sends mouseenter event) {
    do something
} else if (any other mouse event) {
    do something else
}

app.component.html

<div id="one">
    <button type="button"
      (mouseenter)="listen($event.target)"
      (mouseleave)="listen($event.target)"
      (mousedown)="listen($event.target)"
      (mouseup)="listen($event.target)">
    </button>
</div>

<div id="two">
    <button type="button"
      (mouseenter)="listen($event.target)"
      (mouseleave)="listen($event.target)"
      (mousedown)="listen($event.target)"
      (mouseup)="listen($event.target)">
    </button>
</div>

<div id="three">
    <button type="button"
      (mouseenter)="listen($event.target)"
      (mouseleave)="listen($event.target)"
      (mousedown)="listen($event.target)"
      (mouseup)="listen($event.target)">
    </button>
</div>

app.component.ts

listen(e) {
    // I need to get the parent's id
}

What Im trying to do is the following:

Example:

if #id's button event is mouseenter .... do something else if it's any other mouse event .... do something else.

I'm trying to avoid have to add this:

(mouseenter)="listen($event.target)"
(mouseleave)="listen($event.target)"
(mousedown)="listen($event.target)"
(mouseup)="listen($event.target)"

to every button.

How can I do this in short?

Upvotes: 0

Views: 825

Answers (2)

Barremian
Barremian

Reputation: 31115

You could just bind different handlers for different events. Try the following

Template

<div id="one">
    <button type="button"
      (mouseenter)="mouseEnterOne($event.target)"
      (mouseleave)="notMouseEnter($event.target)"
      (mousedown)="notMouseEnter($event.target)"
      (mouseup)="notMouseEnter($event.target)">
    </button>
</div>

<div id="two">
    <button type="button"
      (mouseenter)="mouseEnterTwo($event.target)"
      (mouseleave)="notMouseEnter($event.target)"
      (mousedown)="notMouseEnter($event.target)"
      (mouseup)="notMouseEnter($event.target)">
    </button>
</div>

<div id="three">
    <button type="button"
      (mouseenter)="mouseEnterThree($event.target)"
      (mouseleave)="notMouseEnter($event.target)"
      (mousedown)="notMouseEnter($event.target)"
      (mouseup)="notMouseEnter($event.target)">
    </button>
</div>

Controller

export class AppComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

  mouseEnterOne(target) {
    // handle event
  }

  mouseEnterTwo(target) {
    // handle event
  }

  mouseEnterThree(target) {
    // handle event
  }

  notMouseEnter(target) {
    // handle event
  }
}

You could also bind multiple handlers for an event in the template. Eg.

<button type="button"
  (mouseenter)="mouseEnterOne($event.target); anotherHandler($event); oneOtherHanlder('one')"
</button>

Upvotes: 0

Petar Sabev
Petar Sabev

Reputation: 76

Instead of using (mouseenter)="listen($event.target.parentElement.id)" on every event in every button, which will pass the id of the parent element (If there is one) to your function.

You can declare a variable for the id at the top of your function and pass only the event to it, like this:

in component.html :

  <div id="one">
    <button type="button"
      (mouseenter)="listen($event)"
      (mouseleave)="listen($event)"
      (mousedown)="listen($event)"
      (mouseup)="listen($event)">
    </button>
  </div>

In component.ts :

listen(e) {
    const id = e.target.parentElement.id;

    if (id === "firstId") {
        //do something
    } else if (id === "secondId") {
        //do something else
    }
}

Upvotes: 1

Related Questions