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>

    private void Button_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("Hello World");
}

    Lo mismo en Angular se vería así:

    <button (click)="onClicked()">Click Me</button>

    onClicked() {
    console.log('Hello World');
}

    In WPF we are used to getting information about the event, such as the sender and the event arguments. In Angular we can use the $event variable. This variable will provide information about the event that was invoked.

    <button (click)="onClicked($event)">Click Me</button>

    onClicked(event) {
    console.log(event.target);
}

    Sometimes passing the event object might not be very useful. Instead, you may want to pass the value of an input on the page.

    <input #messageInput>
<button (click)="onClicked(messageInput.value)">Click Me</button>

    onClicked(message) {
    console.log(message);
}

    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)">

    onInputKeyup(event, message) {
    if (event.keyCode === 13) {
        console.log(message);
    }
}

    Surprisingly, in Angular, there is an even easier way to do that. You could bind to the keyup.enter pseudo-event. Using this approach, the event handler will be called only when the user presses Enter.

    <input #messageInput (keyup.enter)="onInputKeyup(messageInput.value)">

    onInputKeyup(message) {
    console.log(message);
}

    Responding to Events of a Component

    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
    }
}

    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
    }
}

    Create Your Own Events

    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());

    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());

    Additional Resources

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