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');
}

    No WPF, estamos acostumados a obter informações sobre o evento, como o remetente e os argumentos do evento. No Angular podemos usar a variável $event. Essa variável fornecerá informações sobre o evento que foi invocado.

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

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

    Às vezes, passar o objeto de evento pode não ser muito útil. Em vez disso, você pode querer passar o valor de uma input na página.

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

    Surpreendentemente, no Angular, há uma maneira ainda mais fácil de fazer isso. Você pode vincular ao pseudo-evento keyup.enter. Usando essa abordagem, o manipulador de eventos será chamado somente quando o usuário pressionar 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.