Introduction
In this article we see events handling in Angular. In this article we 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 cover
- Button Events
- Mouse Events
- Input Events
- Checkbox Events
- Radio Button Events
- Form Event
Create new project
For creating 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 below command in your terminal. Here EventsInAngular is my project name
ng new EventsInAngular
Now Angular cli ask you some questions for adding something in this project which are.
First one is for user Strict in your app
Do you want to enforce stricter type checking and stricter 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, help 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:
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.
Button Events
- Click Event
- Double Click Event
Button Click Event: As we learn in JavaScript or JQuery click event is fire when user click on button. This event use when we want to call something when button click. For define click event in angular we need to define it as (click)=”yourfunction()”.
Button Double Click Event: This event fire when user double click 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 define double click event in angular we need to define it as (dblclick)=”yourfunction()”.
Mouse Events
- Mouse enter event
- Mouse leave event
- Mouse down event
- Mouse up event
Mouse Enter Event: This event is fire user’s mouse enter on any element. We can call this event on any elements. For define mouse enter event in angular we need to define its as (mouseenter)=”yourfunction()”
Mouse Leave Event: This event is fire user’s mouse leave from any element. We can call this event on any elements. For define mouse leave event in angular we need to define its as (mouseleave)=”yourfunction()”
Mouse Down Event: This event is fire user’s mouse press on any element. We can call this event on any elements. For define mouse down event in angular we need to define its as (mousedown)=”yourfunction()”
Mouse Up Event: This event is fire user’s click on any element and after that when mouse button goes up. We can call this event on any elements. For define mouse up event in angular we need to define its as (mouseup)=”yourfunction()”
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 fire when user press any key in that input and When user start pressing key then first its go down on particular that time this event fire. For define Key Down event in angular we need to define it as (keydown)=”yourfunction()”.
Key Up Event: This event is fire when user press any key in that input When user pressed key then key comes up on particular that time this event fire. For define Key Up event in angular we need to define it as (keyup)=”yourfunction()”.
Cut Event: This event is fire when user cut something from input. For define 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 fire when user paste something in input. For define Key Down event in angular we need to define it as (paste)=”yourfunction()”.
Focus Event: This event fire when focus comes to input means when use’s cursor came into input then this this event fire. For this event in angular we need to define it as (focus)=”yourfunction()”.
Blur Event: This event fire when focus leaves from input means when use’s cursor leave from input then this this event fire. For define this event in angular we need to define it as (blur)=”yourfunction()”.
Input Event: This event fire when user input/write something in input. For define this event in angular we need to define it as (input)=”yourfunction()”.
Select Event: This Event fire when user select some text or whole text from input. For define thisevent in angular we need to define it as (select)=”yourfunction()”.
Radio Button and Checkbox Event
- Change
Change Event: This event fire on radio button or checkbox state change. When user checked or unchecked checkbox or when user click on radio button then this event fire. For define this event in angular we need to define it as (change)=”yourfunction()”.
Form Events
- Submit
for using forms in our app we need to import FormModule in our module file.
Form Submit Event: This event fire when user submit form. This event can fire two ways when button type is submit and user click on that button or button type is not submit and on that button click user call submit function. For define this event in angular we need to define it as (submit)=”yourfunction()”.
So these are some events in angular. If you like this article kindly like and share with your friends.
0 Comments