Post
Ask Question

Events In Angular

Introduction

 
In this article we will see events handling in Angular. In this article we will cover all types of events like input events , button events, form events, mouse events, checkbox events , radio button events etc. I hope you will find this article helpful.
 
In this article we will cover, 
  • Button Events
  • Mouse Events
  • Input Events
  • Checkbox Events
  • Radio Button Events
  • Form Event

Create new project

 
For creating a new Angular project open Visual Studio code or you can use any IDE as per your choice then open folder where you want to save your project and open terminal from terminal menu or you can use short cut key ctrl+shift+~ .
 
Now enter thebelow command in your terminal. Here EventsInAngular is my project name 
  1. ng new EventsInAngular  
Now Angular cli asks you some questions for adding something in this project which are.
 
First one is for users in your app
 
Do you want to enforce a more strict type checking and bundle budgets in the workspace?
 
This setting helps improve maintainability and catch bugs ahead of time.
 
For more information, see https://angular.io/strict (y/N)
 
Enabling this flag initializes your new workspace or application with a few new settings that improve maintainability, and helps you catch bugs ahead of time. Additionally, applications that use these stricter settings are easier to statically analyze, which can help the ng update command refactor code more safely and precisely when you are updating to future versions of Angular.
 
If you want to add this press Y or for not adding press N.
 
Second one is routing
 
If you want to add routing in project then enter Y otherwise N. In this project as of now we does not need routing so I press n.
 
Third one is style sheet format
 
Here you need to choose your style sheet from css, scss , sass , less , stylus . Choose as per your need.
 
 
Now installnAngular cli install node module. 
 
In this project we are using Angular 11.
 
 

Events In Angular

 
Here I create a function in ts file which takes one parameter event name and then console event name. We will call this function on different events.
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.sass']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'EventsInAngular';  
  10.   eventCallFunction(eventName){  
  11.     console.log(eventName +" is called ...")  
  12.   }  
  13. }  

Button Events

  • Click Event
  • Double Click Event 
Button Click Event
ing
As we learn in JavaScript or JQuery click event is fired when user clicks on button. This event is used when we want to call something when button is clicked. For define click event in angular we need to define it as (click)=”yourfunction()”.
 
Button Double Click Event
 
This event fires when user double clicks on button. This event is used when we want to take any action or show user something when they double click on any button. For defining double click event in angular we need to define it as (dblclick)=”yourfunction()”.    
  1. <h2 style="color: green;">Button Events</h2>    
  2. <button (click)="eventCallFunction('Button Click ')">Button Click Event</button>    
  3. <br><br>    
  4. <button (dblclick)="eventCallFunction('Button Double Click ')">Button Double Click Event</button>     

Mouse Events

  • Mouse enter event
  • Mouse leave event
  • Mouse down event
  • Mouse up event
Mouse Enter Event
 
This event fires user’s mouse enter on any element. We can call this event on any element. For defining a mouse enter event in Angular we need to define it as (mouseenter)=”yourfunction()”
 
Mouse Leave Event
 
This event fires user’s mouse leave event  from any element. We can call this event on any element. For defining mouse leave event in angular we need to define it as (mouseleave)=”yourfunction()”
 
Mouse Down Event
 
This event fires user’s mouse press on any element. We can call this event on any element. For defining mouse down event in angular we need to define it as (mousedown)=”yourfunction()”
 
Mouse Up Event
 
This event fires user’s click on any element and after that when mouse button goes up. We can call this event on any element. For defining mouse up event in Angular we need to define its as (mouseup)=”yourfunction()”
  1. <h2 style="color: green;">Mouse Events</h2>    
  2. <button (mouseenter)="eventCallFunction('Mouse Enter ')">Mouse Enter Event</button>    
  3. <br><br>    
  4. <button (mouseleave)="eventCallFunction('Mouse Leave')">Mouse Leave Event</button>    
  5. <br><br>    
  6. <button (mouseup)="eventCallFunction('Mouse UP')">Mouse Up Event</button>    
  7. <br><br>    
  8. <button (mousedown)="eventCallFunction('Mouse Down')">Mouse Down Event</button>     

Input Events

  • Key Down Event
  • Key up Event
  • Key Press Event
  • Cut Event
  • Copy Event
  • Paste Event
  • Focus Event
  • Blur Event
  • Input Event
  • Select Event
Key Down Event
 
This event is fired when theuser presses any key in that input and when user first starts pressing key then first it goes down. For defining Key Down event in angular we need to define it as (keydown)=”yourfunction()”.
 
Key Up Event
 
This event is fired when user presses any key in that input. When user presses key then key comes up when that event fires. For defineingKey Up event in angular we need to define it as (keyup)=”yourfunction()”.
 
Cut Event
 
This event is fired when user cuts something from input. For defining this event in Angular we need to define it as (cut)=”yourfunction()”.
 
Copy Event
 
This event is fire when user copy something from input. For define this event in angular we need to define it as (copy)=”yourfunction()”.
 
Paste Event
 
This event is fired when user pastes something in input. For defining Key Down event in Angular we need to define it as (paste)=”yourfunction()”.
 
Focus Event
 
This event fires when focus comes to input, which means when user's cursor comes into input area then this this event fires. For this event in Angular we need to define it as (focus)=”yourfunction()”.
 
Blur Event
 
This event fires when focus leaves from input which means when user's cursor leaves from input area then this this event fires. For defining this event in Angular we need to define it as (blur)=”yourfunction()”.
 
Input Event
 
This event fires when user inputs/writes something in input area. For defining this event in Angular we need to define it as (input)=”yourfunction()”.
 
Select Event
 
This event fires when user selects some text or whole text from input. For defining this event in Angular we need to define it as (select)=”yourfunction()”. 
  1. <h2 style="color: green;">Input Events</h2>    
  2. This is keyup event    
  3. <input (keyup)="eventCallFunction('Key Up Event')" />    
  4.  <br><br>    
  5.  This is key down event    
  6.  <input (keydown)="eventCallFunction('Key down Event')" value=""/>    
  7.  <br><br>    
  8.  This is key press event    
  9.  <input (keypress)="eventCallFunction('Key press Event')" value=""/>    
  10.  <br><br>    
  11.  This is cut event    
  12.  <input (cut)="eventCallFunction('Cut Event')" value=""/>    
  13.  <br><br>    
  14.  This is copy event    
  15.  <input (copy)="eventCallFunction('Copy Event')" value=""/>    
  16.  <br><br>    
  17.  This is paste event    
  18.  <input (paste)="eventCallFunction('Past Event')" value=""/>    
  19.  <br><br>    
  20.  This is focus event    
  21.  <input (focus)="eventCallFunction('Focus Event')" value=""/>    
  22.  <br><br>    
  23.  This is Blur event    
  24.  <input (blur)="eventCallFunction('Blur Event')" value=""/>    
  25.  <br><br>     
  26.  This is input event    
  27.  <input (input)="eventCallFunction('input Event')" value=""/>    
  28.  <br><br>    
  29.  This is input select event    
  30.  <input (select)="eventCallFunction('select  Event')" value=""/>     
Radio Button and Checkbox Event
  • Change
Change Event
 
This event fires on radio button or checkbox state change. When user checks or unchecks checkbox or when user clicks on radio button then this event fires. For defining this event in Angular we need to define it as (change)=”yourfunction()”. 
  1. <h2 style="color: green;">Check box event Events</h2>     
  2. <input type="checkbox" (change)="eventCallFunction('checkbox change Event')" value="1"/> This is checkbox change event    
  3. <br><br>    
  4.     
  5. <h2 style="color: green;">Radio Button  Events</h2>     
  6. <input type="radio" (change)="eventCallFunction('Radio Button 1 change Event')" value="1" name="radioButton"/> This is radio button 1 change event    
  7. <input type="radio" (change)="eventCallFunction('Radio Button 2 change Event')" value="2"  name="radioButton"/> This is radio button 2 change event    

Form Events

  • Submit 
For using forms in our app we need to import FormModule in our module file.
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3.     
  4. import { AppComponent } from './app.component';    
  5. import { FormsModule } from '@angular/forms';    
  6.     
  7. @NgModule({    
  8.   declarations: [    
  9.     AppComponent,    
  10.         
  11.   ],    
  12.   imports: [    
  13.     BrowserModule,    
  14.     FormsModule  //import this module for use form   
  15.   ],    
  16.   providers: [],    
  17.   bootstrap: [AppComponent]    
  18. })    
  19. export class AppModule { }     
Form Submit Event
 
This event fires when user submits form. This event can fire two ways, when button type is submitted and user clicks on that button or button type is not submitted and on that button click user calls submit function. For defining  this event in Angular we need to define it as (submit)=”yourfunction()”. 
  1. <h2 style="color: green;">Form Submit Events</h2> <br>    
  2. <form (submit)="eventCallFunction('Form Submit Event')">    
  3.   <input  value=""/>    
  4.   <br><br>    
  5.   <input  value=""/>    
  6.   <br><br>    
  7.   <button type="submit">Submit Form</button>      
  8. </form>    
View this whole project on StackBitz
 
So these are some events in Angular. If you like this article kindly like and share with your friends.


Similar Articles