Angular events binding and Angular event list

Angular events binding is one type of data binding in Angular. Angular data binding allows us to sync data between the component properties and the view on the template, The data binding helps bring or update data in component typescript code to the view or vice versa

In this tutorial, we’ll learn how to use event binding, different types of events available in an Angular, and demonstrate a few examples of it. Let get started.

What is Angular events or Angular event binding

Angular event binding is a type of one-way data binding, where data flow from view in a template to data source in a component typescript file. Event binding allows us to listen for certain events such as clicks, touches, keystrokes, and mouse movements so that we can respond to this event.

Angular events

Angular event binding syntax

Angular event binding syntax consists of a  target event name within parentheses on the left and a quoted template statement on the right. The statement can be expression or invoking method. In invoking, the method can with and without argument, if any argument, then we can pass any number of arguments.

<some-element (eventName)="expression">
  Invoke someMethod on some event
</some-element>

<some-element (eventName)="someMethod()">
  Invoke someMethod
</some-element>

<some-element (eventName)="someMethod(parameter1, parameter2)">
  Invoke someMethod with parameters
</some-element>

// Example
<button (click)="update()">Submit</button>

In the above example, on the button tag, we add an event (click) to define what should happen when the button is clicked. When the (click) event happens we call we want to tell Angular to respond to the click event on the button, by invoking the update() method.

Angular event binding has the following parts:

  1. Host element is the source of events for the binding.
  2. Event name is what type of event to bind to host element
  3. Expression is evaluated when the event is triggered, it can be expression or method with and without parameter.

Angular events example: Angular click event

We have got some idea about Angular event binding, let demonstrate a simple example of Angular click event. Here is a screenshot of our first example of angular event binding.

angular events or angular click event

We have num variable property from component typescript file, and we have two-button with Angular click event. Clicking on-increment will add number by one and clicking on decrement will subtract number by one. Let first define num in the component typescript file.

import { Component } from '@angular/core';
.....
export class AppComponent {
  num = 1;
}

Now in our component template, let add two buttons with Angular click event.

<section>
  <h3>Angular event binding</h3>
  <div>
    Value on number on click event <span class="num-large">{{ num }}</span>
  </div>

 <button class="btn btn-success" (click)="num = num + 1">Increment ++</button>
 <button class="btn btn-danger" (click)="num = num - 1">Decreament --</button></section>

We used bootstrap for this UI, if you want to know the best approach of adding Bootstrap in Angular, then we have already covered a tutorial on it.

Types of angular event listener or Angular events list

In the above example, we have learned the Angular click event. In native HTML or in Angular we have plenty numbers of options to add Angular event listener. Here we have listed some of the most popular and common Angular event listeners in Angular.

Event nameDescription
(click)The click event occurs when an element is clicked.
(change)The change event is triggered when change occurs on the binding elements, like select, Textarea, input, and other elements.
(dblclick)The double click event occurs when an element is clicked two times.
(blur)The blur event fires when an element has lost focus. 
(submit)The submit event is fire when click on the button or input with type submit.
(focus)The focus event fires when an element has received focus
(scroll)The scroll event fires when the document view has been scrolled.
(keyup)When a user presses and releases a key, an event occurs and is mostly used with input fields. It is one of the keyboard events.
(keydown)The keydown event is fired when a key is pressed. It is one of the keyboard events.
(keypress) The keypress event is fired when a key that produces a character value is pressed down. It is one of the keyboard events.
(mousedown)The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element and is a mouse event.
(mouseup)The mouseup event occurs when a user releases a mouse button over an element and is a mouse event.
(mouseenter)The mouseenter event occurs when the mouse pointer is moved onto an element and is a mouse event.
(mouseleave)The mouseleave event occurs when the mouse pointer is moved out of an element and is a mouse event.
(mousemove)The mousemove event occurs when the pointer is moving while it is over an element and is a mouse event.
(mouseover)The mouseover event occurs when the mouse pointer is over the selected element and is a mouse event.
(mouseup)The mouseup event occurs when a user releases a mouse button over an element and is a mouse event. 
(copy)The copy event occurs when the user copies the content of an element. 
(paste)The past event occurs when the user pastes the content of an element. 
(cut)The cut event occurs when the user cuts the content of an element. 
(drag)The drag event occurs when an element or text selection is being dragged
(drop)The drop event occurs when dragged data is dropped.
(dragover)The dragover event occurs when a draggable element or text selection is being dragged over a valid drop target. 
(input)The input event occurs when an element gets user input
Angular events list

Angular $event object

Angular event object $event has the get details information about an event. This $event is a special variable, that represents the thing emitted. Here we’ll demonstrate a simple example of it.

Angular $event object

In this example we have input and a button, on clicking on the button we are sending two-parameter, the first is $event object and a second value of the input box. We can see above in the image, event objects have detailed information about the event emitted.

<div class="form-group">
 <label for="exampleInputEmail1">User name</label>
 <input class="form-control" [(ngModel)]="name" 
    name="name" #nameCtrl="ngModel">
   <button class="btn btn-success" (click)="clickEvent($event, nameCtrl.value)">
        Submit
   </button>
</div>

In the typescript component file, let define a method that we want to invoke when the user clicks on submit button.

....
export class AppComponent {
  name = '';

  clickEvent(event: Event, name: string) {
    console.log('Input name value: ' + name)
    console.log(event);
    debugger
  }
}

Angular event example on select element

In our last example, we’ll invoke the Angular change event on select input, here is a screenshot of the Angular change event.

angular change event example
<div class="form-group">
  <label>Select favouritcountry</label>
  <select (change)="selectedCountry($event)" class="form-control">
    <option value="india" selected="selected">India</option>
    <option value="france">France</option>
    <option value="germany">Germany</option>
    <option value="canada">Canada</option>
  </select>
</div>
selectedCountry(event: any) {
  console.log(event.target.value);
}

Conclusion
We have completed, Angular event binding and we can use a custom event emitter to communicate between child to parent component using @Ouput() decorator.

Related Post

Spread the love

Leave a Comment

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

Scroll to Top