Manejo de eventos Angular

    Los eventos Angular se emiten como respuesta a las interacciones del usuario. Cuando se emite un evento Angular, se ejecuta su lógica de manejo de eventos. WPF proporciona eventos enrutados, eventos CLR y comandos. Mientras que en Angular, hay eventos DOM.

    Aquí hay un ejemplo simple de cómo responde a un evento de clic de un botón en WPF:

    <Button Click="Button_Click">Click Me</Button>
xml
    private void Button_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("Hello World");
}
csharp

    Lo mismo en Angular se vería así:

    <button (click)="onClicked()">Click Me</button>
html
    onClicked() {
    console.log('Hello World');
}
typescript

    En WPF estamos acostumbrados a obtener información sobre el evento, como el remitente y los argumentos del evento. En Angular podemos usar la variable $event. Esta variable proporcionará información sobre el evento que se invocó.

    <button (click)="onClicked($event)">Click Me</button>
html
    onClicked(event) {
    console.log(event.target);
}
typescript

    A veces, pasar el objeto de evento puede no resultar muy útil. En su lugar, es posible que desees pasar el valor de una input en la página.

    <input #messageInput>
<button (click)="onClicked(messageInput.value)">Click Me</button>
html
    onClicked(message) {
    console.log(message);
}
typescript

    Digamos que queremos imprimir el valor de una entrada al presionar Enter. Puedes hacerlo en Angular de la siguiente manera:

    <input #messageInput (keyup)="onInputKeyup($event, messageInput.value)">
html
    onInputKeyup(event, message) {
    if (event.keyCode === 13) {
        console.log(message);
    }
}
typescript

    Sorprendentemente, en Angular hay una forma aún más sencilla de hacerlo. Puedes vincularlo al pseudoevento keyup.enter. Con este enfoque, el controlador de eventos se llamará solo cuando el usuario presione Enter.

    <input #messageInput (keyup.enter)="onInputKeyup(messageInput.value)">
html
    onInputKeyup(message) {
    console.log(message);
}
typescript

    Responder a eventos de un componente

    En WPF, cuando crea sus propios controles personalizados, a menudo necesita extender o modificar algunos eventos base como este:

    public class MyControl : Control
{
    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        base.OnMouseDown(e);
        // Place your custom logic here
    }
}
csharp

    En Angular, puedes lograr un resultado similar utilizando el decorador HostListener.

    @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.css']
})
export class MyComponent {
    @HostListener('mousedown', ['$event'])
    onMouseDown(event) {
        // place your custom logic here
    }
}
typescript

    Crea tus propios eventos

    A veces necesitas definir tus propios eventos. En WPF puede definir CLR o eventos enrutados. Echemos un vistazo a un ejemplo sencillo de un evento CLR en WPF:

    public event EventHandler<TaskEventArgs> TaskCompleted;

...
this.TaskCompleted(this, new TaskEventArgs());
csharp

    Para definir un evento personalizado en Angular, debes definir una propiedad EventEmitter marcada con el decorador Output.

    @Output()
taskCompleted = new EventEmitter<TaskEventArgs>();

...
this.taskCompleted.emit(new TaskEventArgs());
typescript

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.