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>
xml
    private void Button_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("Hello World");
}
csharp

    A mesma coisa no Angular ficaria assim:

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

    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>
html
    onClicked(event) {
    console.log(event.target);
}
typescript

    À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>
html
    onClicked(message) {
    console.log(message);
}
typescript

    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)">
html
    onInputKeyup(event, message) {
    if (event.keyCode === 13) {
        console.log(message);
    }
}
typescript

    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)">
html
    onInputKeyup(message) {
    console.log(message);
}
typescript

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

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

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

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

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.