Handling Angular Events

    The Angular events are emitted as a response to user interactions. When an Angular event is emitted, its event handling logic is executed. WPF provides routed events, CLR events, and commands. While in Angular, there are DOM events.

    Here is a simple example how you respond to a click event of a button in WPF:

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

    The same thing in Angular would look like this:

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

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

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

    Let's say that we want to print the value of an input on pressing Enter. You could do that in Angular like this:

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

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

    Responding to Events of a Component

    In WPF, when you create your own custom controls, often you need to extend or modify some base events like this:

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

    In Angular, you achieve a similar result using the HostListener decorator.

    @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

    Sometimes you need to define your own events. In WPF you could define either CLR or routed events. Let's take a look at a simple example of a CLR event in WPF:

    public event EventHandler<TaskEventArgs> TaskCompleted;

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

    In order to define a custom event in Angular, you have to define an EventEmitter property marked with the Output decorator.

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

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

    Additional Resources

    Our community is active and always welcoming to new ideas.