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.
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.
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.
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.
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.
John Au-Yeung is a frontend developer with 6+ years of experience. He is an avid blogger (visit his site at https://thewebdev.info/) and the author of Vue.js 3 By Example.