Angular Basics: How To Use the Angular Mouseenter Event

The mouseenter event allows us to trigger a behavior when the user mouses over an element. Learn more about this and other mouse events.

Angular is a framework that lets us create interactive web frontends for users. It provides us with ways to handle user interactions with input devices on the browser in a clean way.

One common thing that we have to do when we create web frontend apps is handling mouse events. In this article, we will look at how to handle mouse interaction events within an Angular app.

Native Browser Mouse-Enter Events

The mouseenter event is triggered when we hover over an element. This behavior is the same as the mouseover event.

However, the mouseover event bubbles to all ancestor elements and also sends the event to any descendants when the pointer is moved from one descendant to its own space. The mouseenter event does bubble up but does not send the event to descendant elements.

In plain JavaScript, we can listen for the native mouseenter event by calling the addEventListener method on the element that triggers the event.

For example, we write:

<div>
  <section>foo</section>
  <section id="mouseTarget">bar</section>
  <section>baz</section>
</div>

to add a few elements onto our HTML code.

Then we write:

const mouseTarget = document.querySelector("#mouseTarget");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.color = "green";
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.color = "black";
});

We select the element that we want to listen for the mouseenter with document.querySelector.

Then we call mouseTarget.addEventListener with mouseenter and the mouseenter event handler function to listen for the mouseenter event on mouseTarget.

Likewise, we do the same with the mouseleave event. The mouseleave event is triggered when our mouse pointer leaves the element.

In the mouseenter event handler function, we set the mouseTarget’s color to green. And when our mouse leaves the element, we set mouseTarget’s color to black.

As a result, when we move our mouse pointer to “bar,” we see that it turns green. And when we move our mouse pointer away from “bar,” it turns back to black.

Handling Mouseenter Events in Angular Components

Angular comes with built-in syntax to handle mouseenter events. The mouseenter event is triggered on an element when our mouse enters the element.

Angular’s template syntax has the (mouseenter) directive to let us run code when the mouseenter event is triggered on an element. For instance, we write:

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMouseEnter() {
    console.log("mouse enter");
  }
}

to add the onMouseEnter method into the AppComponent component class that logs a message.

Then we write:

app.component.html

<div>
  <section>foo</section>
  <section (mouseenter)="onMouseEnter()">bar</section>
  <section>baz</section>
</div>

to add some elements into the template.

In the second section element, we add the (mouseenter) directive to onMouseEnter(). This way, when our mouse pointer enters the second section element, the onMouseEnter method is called and mouseenter is logged.

We can use the same logic to run code when our mouse enters a list item.

For instance, we write:

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(name: string) {
    console.log("mouse enter", name);
  }

  onMouseOut(name: string) {
    console.log("mouse out", name);
  }
}

to add the names string array into AppComponent. Then we add the onMouseEnter and onMouseOut methods that log the name value.

Next, we write:

app.component.html

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter(name)"
      (mouseleave)="onMouseOut(name)"
    >
      {{ name }}
    </li>
  </ul>
</div>

to render a ul element with li elements inside it.

We render the entries in the names array with the *ngFor directive. And we set (mouseenter) on each li element rendered to onMouseEnter(name) to call onMouseEnter with name when our mouse pointer enters the li element.

Likewise, we set (mouseleave) to onMouseOut(name) to call onMouseOut with name to call onMouseOut with name when our mouse pointer leaves the li element.

Therefore, when our mouse pointer moves over “bob,” we see mouse enter bob logged.

And when our mouse pointer leaves “bob,” we see mouse out bob logged.

Applying Hover Effect Styles With Angular

We can apply styles when we move our mouse pointer over an element or when it leaves the element.

For example, we write:

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(hoverName: HTMLElement) {
    hoverName.style.color = "green";
  }

  onMouseOut(hoverName: HTMLElement) {
    hoverName.style.color = "black";
  }
}

to change the onMouseEnter and onMouseOut methods to take a parameter of type HTMLElement.

In them, we set the color CSS property of the hoverName HTML element to a specific color.

Next, we write:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      #hoverName
      (mouseenter)="onMouseEnter(hoverName)"
      (mouseleave)="onMouseOut(hoverName)"
    >
      {{ name }}
    </li>
  </ul>
</div>

to add the #hoverName template reference variable to each li element in the template.

Template reference variables are assigned to elements so that we can reference them elsewhere in the component template or in the component class code.

Angular can distinguish the element that is being referenced even if we assign the same variable name to each element.

Then we set (mouseenter) to onMouseEnter(hoverName) to call onMouseEnter with hoverName when we move our mouse pointer over a li element. Likewise, we set (mouseleave) to onMouseOut(hoverName) to call onMouseOut with the hoverName template reference variable when our mouse pointer leaves the li element.

In onMouseEnter, we set hoverName.style.color to green to make the text green when we move our mouse pointer over the li element with the template variable. And in onMouseOut, we set hoverName.style.color to black to make the text black when we move our mouse pointer over the li element with the template variable.

As a result, we should see the name that we hover over on the page turn green. And when our mouse leaves the name, then the name will turn back to black.

We can rewrite the code in the previous example without using template variables.

We keep the code in app.component.ts the same. Then we change code in app.component.html to:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter($event.target)"
      (mouseleave)="onMouseOut($event.target)"
    >
      {{name}}
    </li>
  </ul>
</div>

We removed the #hoverName template variable.

Instead, we pass the element as the argument of onMouseEnter and onMouseOut methods by using $event.target instead.

$event.target is the element that triggered the event. And $event is the event object of the event that has been triggered. The event object is a native browser event object.

As we can see, the logic of handler mouseenter and mouseleave events is the same as the plain JavaScript example. The only difference is that Angular provides us with special syntax that we can add to our HTML code to do the same thing as addEventListener.

And our event handler methods are in the component class code instead of putting it anywhere we feel like in the plain JavaScript code.

Conclusion

One thing we have to do often when we create web frontend apps is handle mouse events. We can handle mouseenter and mouseleave events easily with Angular.

The logic is the same as when we use plain JavaScript to handle those events. Angular just provides us with a structured way to handle mouse and input device events with template variables and directives.

The mouseenter event is triggered when we move our mouse pointer over an element. And the mouseleave event is triggered when we move our mouse pointer away from an element.