Explore Angular 4 Event Binding Tutorial In Less Than 5 Minutes


Hey Techies, today we will explore the topic, Angular 4 Event Binding.

In Angular or any JavaScript, event binding is one of the important aspects to create a dynamic UI for the users.

Without events and their(event) listeners, you would not able to create a user-friendly UI.

Getting Started With Angular 4 Event Binding

Event, is a thing that happens or takes place.

And event binding, is a set up of an event handler for the target event.

Morever, The event binding conveys the information about the event, including data values, through an event object named $event.

So, whenever user perform any actions on the view, we need to capture that action and based on that we might need to perform anything related to that.

Furthermore, as a programmer we have to go through a lot of types of event binding in jQuery or any other JavaScript. It’s the time to learn how Angular 4 event binding works.

Similary, like other JavaScripts, Angular 4 also works with those common events like click, keyup, etc.

How event binding works in Angular 4?

As mentioned earlier, every event is requiring a listener because whenever any events called, there should be something that able listen that event.

So, basically it passes the data from template to the component class.

Similary, there’s one opposite way is passing the data from component class to the view, suggested visit, Property Binding

For example, a user clicks on a button and we need to perform any operation that happens with event binding only.

<button (click)="myFunction($event)">Button To Click</button>

Here, we need to create a function named myFunction to handle click event.

$event is optional, it passes the different types of properties associated with that particular event.

export class AppComponent {
  myFunction(event) {

You can see the console of your browser, where you will see the different associated properties to this particular event.

Similary, if you want to get the value of input box on keyup event, you can do that as shown below.

myFunction(event) {

Let’s use reference with events

Here, I’ve used reference, it’s one of the amazing features of Angular 4.

By using reference, I can directly pass the value of that input box in myFunction.

<input type="text" #inputTag/>
<button (click)="myFunction(inputTag.value)">Button To Click</button>

Here, we can access the value directly

myFunction(value) {

List of common events in angular 4

Now, there’re lot of common events that we’re using in our day2day programming, here is a list of few.

(focus)="myFunction()"  // An element has received focus
(blur)="myFunction()"   // An element has lost focus

(submit)="myFunction()"  // A submit button has been pressed

(scroll)="myFunction()"  // When you scroll

(cut)="myFunction()"	// When cut happens
(copy)="myFunction()"   // For copy
(paste)="myFunction()"	// For paste

(keydown)="myFunction()"	// For keydown
(keypress)="myFunction()"	// When keypress
(keyup)="myFunction()"	// When keyup

(mouseenter)="myFunction()"	// For mouse enter
(mousedown)="myFunction()"	// For mouse down
(mouseup)="myFunction()"	// For mouse up

(click)="myFunction()"		// When you click an element
(dblclick)="myFunction()"	// For double click

(drag)="myFunction()"		// When you drag an element
(dragover)="myFunction()"	// For dragover
(drop)="myFunction()"    // For drop an element

Furthermore, suggested visits,

I hope, you love this article. Stay tuned, I will keep you posted for further updates and tutorials.

Please share your suggestions/questions by commenting below.

Leave a Reply

Notify of