El manejo de eventos en Angular sirve para interactuar con el usuario que está visitando el sitio. Algunos de los eventos disponibles pueden ser: onmouseover, click, entre otros.
Para usar estos eventos, usa la sintaxis:
(evento)=»función()»
A continuación un ejemplo sobre cómo manejar estos eventos:
import {Component} from "@angular/core";
@Component({
selector: 'app-eventos',
template: `<section (mouseover)="onMouseOver()" (mouseout)="onMouseOut()" >Bienvenido a la sección {{ message }} </section>`
})
export class EventosComponent {
message : string = "";
onMouseOver() {
this.message = "Eventos en el DOM";
}
onMouseOut() {
this.message = "Mouse Out ejecutado";
}
}Tras ejecutar el código y pasar el cursor por encima del tag section, se mostrará el mensaje: Eventos en el DOM. Para borrar el texto al retirar el cursor, puedes usar el evento mouseout tal y como se ha mostrado en el ejemplo.
Si te has preguntado cómo usar eventos en el DOM a través de Angular, esta es la forma.
¿Has usado eventos en Angular? ¡Comparte tu experiencia!