Events in Angular

Angular offers a powerful event-handling system that enables you to react to user actions, system events, and other triggers. In this article, let’s dive into event-binding with examples.

For a video explanation, watch this video on my channel InterviewPro.

Event Binding:

Event binding in Angular is achieved by putting the event name in parenthesis () in the HTML template. This links the event (like a button click, or mouse move) to a function in your component’s TypeScript file.

Example:

Let’s assume you visited my channel, InterviewPro, to view my playlists and learn Angular. You liked my playlist so much that you didn’t want to miss any updates, so you hit the subscribe button and also the bell icon to receive notifications.

When you click the Subscribe button, the button’s text changes from Subscribe to Unsubscribe. How did that happen? What occurred in the backend?

Keep reading. You’ll get to know in a few seconds.

The HTML code for a typical ‘Subscribe’ button would look like this.

<button>Subscribe</button>

Let’s make this button dynamically change its text. From the knowledge gained so far from my previous articles, property binding is what comes to mind.

I used a boolean variable isSubscribed to determine whether the user has subscribed to the channel or not.

<button>{{isSubscribed ? "Unsubscribe" : "Subscribe" }}</button>

We want to toggle the text when we click on the button. This is where event binding comes into the picture.

To add a click event, we use parentheses () around the event name and assign the method that is triggered when a click occurs on the button.

<button (click)="onSubscribe()">{{isSubscribed ? "Unsubscribe" : "Subscribe" }}</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSubscribed: boolean = false;

  onSubscribe(): void {
    /*
      Code to subscribe or unsubcribe the user
    */
    this.isSubscribed = !this.isSubscribed;
  }
}

In this example:

• (click)="onSubscribe()" binds the click event of the button to the onSubscribe method in the component.
• When the button is clicked, onSubscribe is executed, updating the isSubscribed property, which is used to toggle text on the button.

Pass event data:

You can also pass event data to the event handler method using$event object.

$event is a special variable that holds the data about the event that was triggered. It is used to pass event-specific information to the event handler function.

Let’s take another example to understand this.

Get InterviewPro’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The user watches a video on event binding and submits a comment by entering text into the comment box. We want to save this information in our database. To do so, we need to retrieve the data provided by the user in the comment input box.

<input (input)="onInputChange($event)" placeholder = "Add a comment ..." />

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  comment: string = '';

  onInputChange(event: Event): void {
    const el = event.target as HTMLInputElement;
    this.comment= el.value;
  }
}

In this example:

• (input)="onInputChange($event)" binds the input event to the onInputChange method.
• $event contains information about the input event, allowing the method to update the comment property with the current value of the input field.

Common Event Types in Angular:

Click Event: Triggered when a mouse click occurs on an element.

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

Input Event: Fired when the value of an input element changes.

<input (input)="onInputChange($event)">

Submit Event: Occurs when a form is submitted.

<form (ngSubmit)="onFormSubmit()">

Mouse Enter Event: Fired when the mouse pointer enters the boundaries of an element.

<div (mouseenter)="onMouseEnter()">

Mouse Leave Event: Triggered when the mouse pointer leaves the boundaries of an element.

<div (mouseleave)="onMouseLeave()">

Keydown Event: Fired when a key is pressed down.

<input (keydown)="onKeyDown($event)">

Keyup Event: Occurs when a key is released.

<input (keyup)="onKeyUp($event)">

Focus Event: Triggered when an element receives focus.

<input (focus)="onInputFocus()">

Blur Event: Fired when an element loses focus.

<input (blur)="onInputBlur()">

Scroll Event: Occurs when an element’s content is scrolled.

<div (scroll)="onScroll()">

Conclusion:

In this article, we explored how events are utilized in Angular to manage user interactions. We examined examples illustrating how to access event data using $event variable and discussed commonly used events in Angular.

By understanding how to handle various types of events, such as click, input, submit, and more, you can create seamless user experiences.

Hope you enjoyed this article. Keep following my articles to learn more about Angular and don’t forget to subscribe to my channel InterviewPro.

Thank you.