What is Event Binding in Angular 4

Posted by

Welcome to another lesson of Angular 4 by PodinaTutorials.com. In this lesson, we are going to discuss, What is Event Binding in Angular 4. Let’s elaborate what actually event binding is. Then we will proceed to, How it worked in Angular 4.

Event Binding is a user interaction within an application in the form of keyboard movement, a mouseover or a mouse click. It actually generated an event and this event needs to be handled in order to perform some sort of action. This is what actually Event Binding is!

It is a one-way data binding. It sends information from the view to the component class. Event Binding is pretty much opposite to Property Binding, where data is sent from component to the view.

Watch Video, If you want to clear you Mind

You can also Subscribe to our YouTube Channel Podina Tutorials.

https://youtu.be/a7VxdMvG38U

Types of Angular Event Binding

Angular 4 provides a variety of events. Here are the most common event binding which you can use.  Furthermore, you can also see it at https://developer.mozilla.org/en-US/docs/Web/Events

(focus)=" myFunc()" // This element has received focus
(blur)=" myFunc()" // This element has lost focus
(submit)=" myFunc()" // This element submit button has been pressed
(scroll)=" myFunc()" // This element scroll the dacument
(cut)="myFunc()" // This element cut and copied the selection to the clipboard
(copy)=" myFunc()" // This element copied selection to the clipboard
(paste)=" myFunc()" // This element paste the selection from the clipboard
(keydown)=" myFunc()" // This element provide “ANY key is pressed”
(keypress)=" myFunc()" // This element provide the functionality of “ANY key is pressed except Shift, Fn, CapsLock”
(keyup)=" myFunc()" // This element provide “ANY key is released”
(mouseenter)=" myFunc()" // This element is pointing device onto the element that has the listener attached.
(mousedown)=" myFunc()" // This element pointing device button is pressed on an element
(mouseup)=" myFunc()" // This element pointing device button is released over an element
(click)=" myFunc()" // This element pointing device button
(dblclick)=" myFunc()" // This element pointing device button is clicked twice on an element
(drag)=" myFunc()" // This element or text selection is being dragged
(dragover)=" myFunc()" // This element or text selection is being dragged over a valid drop target
(drop)=" myFunc()" // This element is dropped on a valid drop target

Event Binding Example

Let’s create a button on Event Binding

<button (click) = "myFunc($variable)"> Click Button </button>

In the above code, Notice the $variable. $variable is optional, and it passes a variety of event properties, which is associated with that particular event.

Now let’s create myFunc() method below in the component class:

export class AppComponent {
  
  myFunc(variable) {
    console.log(variable);
  }

}

Conclusion

After doing the above code, run ng serve in the terminal and visit localhost:4200 in the browser. Click the button and you will see the result. I recommend you, to try more such events, which is provided above and also on the Mozilla page here: https://developer.mozilla.org/en-US/docs/Web/Events. You can also see our previous topic Data Binding and Regular Expressions in Angular 4 and property binding in Angular 4.

Book Suggested

Beginning Angular with Typescript (updated to Angular 5)

Buy the book Beginning Angular with TypeScript to master Angular. It is a great book with lots of code examples.

Event Binding in Angular 4

Also Read  How to Nest Component in Angular 4

Leave a Reply

Your email address will not be published. Required fields are marked *