Lists of useful events types for event binding in Angular

In this article we discuss events type in Angular so we can easily bind that event and communicate with your application. Events help to trigger an action on specific conditions like click, Double click, Blur, Keyup, and so on. Below is the full list of the event which we can fire when we needed.

Event Name How to Call Description
Click (click)=”clickFunction()” When we need to do some action on element click on that time bind these event on that element.
Double Click (dblclick)=”dbclickFunction()” When we need to do some action on double click on element at that time bind these event.
Blur (blur)=”blurFunction()” The blur event fires when an element has lost focus. Mainly used in Form elements.
Focus (focus)=”focusFunction()” The focus event fires when an element has received focus.Mainly used in Form elements.
Submit (submit)=”submitFunction()” When we want to submit form we trigger “submit” event.
Scroll (scroll)=”scrollFunction()” When we Scroll the page it fires these event.


Event Name How to Call Description
Keyup (keyup)=”keyupFunction()” The keyup event is fired when a key is released from the keyboard.
Keypress (keypress)=”keypressFunction()” The keypress event is fired when a key that produces a character value is pressed down.
Keydown (keydown)=”keydownFunction()” The keydown event is fired when a key is pressed.
Mouse Up (mouseup)=”mouseupFunction()” The mouseup event is fired at an Element when a button on a pointing device (such as a mouse) is released while the pointer is located inside it.
Mouse Down (mousedown)=”mousedownFunction()” The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.
Mouse Enter (mouseenter)=”mouseenterFunction()” The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.
Event Name How to Call Description
Cut (cut)=”cutFunction()” The cut event is fired when the user has initiated a “cut” action through the browser’s user interface.
copy (copy)=”copyFunction()” The copy event fires when the user initiates a copy action through the browser’s user interface.
Paste (paste)=”pasteFunction()” The paste event is fired when the user has initiated a “paste” action through the browser’s user interface.
Drag (drag)=”dragFunction()” The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device.
Drop (drop)=”dropFunction()” Drop event fire when we leave the pointing device.
Dragover (dragover)=”dragoverFunction()” The dragover event is fired when an element or text selection is being dragged over a valid drop target.

Let’s create a demo for event binding. let’s add below code in the “app.component.html” & “app.component.ts”.


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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;


  clickEvent(){
    alert('Simple click event fired');
  }

  dblclickEvent(){
    alert('Double click event fired');   
  }

  blurEvent(){
    console.log('Blur event fired');
   // alert('Blur event fired');   
  }

  focusEvent(){
    console.log('Focus event fired');
    //alert('Focus event fired');   
  }

  copyEvent(){
    alert('Copy event fired');   
  }

  cutEvent(){
    alert('Cut event fired');   

  }

  pasteEvent(){
     alert('Paste event fired');   
  }

  
}


<h1 style="text-align:center" (copy)="copyEvent()" (cut)="cutEvent()"
>Events Demo</h1><br>
<div class="alert alert-primary m-b-2" role="alert">
   <button class="btn btn-primary" (click)="clickEvent()">Click Event</button>
</div>
<div class="alert alert-primary m-b-2" role="alert">
   <button class="btn btn-info" (dblclick)="dblclickEvent()">Double Click</button>
</div>

<div class="alert alert-primary m-b-2" role="alert">

  <input type="text" (blur)="blurEvent()" (cut)="cutEvent()" (paste)="pasteEvent()" value="Blur event ">
</div>

<div class="alert alert-secondary m-b-2" role="alert">

  <input type="text" (focus)="focusEvent()" (cut)="cutEvent()" (paste)="pasteEvent()" value="Focus event ">
</div>



Output Demo


Below is the demo code for the events you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 14
  •  
  •  
  •