Manipulando eventos Angular

    Os eventos Angular são emitidos como uma resposta às interações do usuário. Quando um evento Angular é emitido, sua lógica de manipulação de eventos é executada. O WPF fornece eventos roteados, eventos CLR e comandos. Enquanto no Angular, há eventos DOM.

    Aqui está um exemplo simples de como você responde a um evento de clique de um botão no WPF:

    <Button Click="Button_Click">Click Me</Button>

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

    A mesma coisa no Angular ficaria assim:

    <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 o valor de uma entrada ao pressionar Enter. Você pode fazer isso em Angular assim:

    <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

    No WPF, quando você cria seus próprios controles personalizados, geralmente é necessário estender ou modificar alguns eventos base como este:

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

    No Angular, você obtém um resultado semelhante usando o 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

    Às vezes, você precisa definir seus próprios eventos. No WPF, você pode definir eventos CLR ou roteados. Vamos dar uma olhada em um exemplo simples de um evento CLR no WPF:

    public event EventHandler<TaskEventArgs> TaskCompleted;

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

    Para definir um evento personalizado no Angular, você precisa definir uma propriedade EventEmitter marcada com o decorador Output.

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

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

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.