Cómo manejar eventos en Angular: guía rápida y ejemplo práctico

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!