HostListener in Angular 17 | Standalone | Listening Events

HostListener  :

        This helps us to handle events more easily and one of the best thing about the Hostlistener is we can handle lost of events.

Here is an example of how to use @HostListener : 

         Now we are create a HostListener for listening how many times the user click's our website.

 Step - 1 :

        We need to create method with functionality for what process we are going to execute when the event triggers.

        clickCount = 0;

  onHostClick() {    this.clickCount++;   }

Step - 2 :

        Use the @HostListener decorator for listen to the events trigger and we need to pass one argument to this decorator of which event we are listening. Like this

        @HostListener('click')
  onHostClick() {     this.clickCount++;   }

Complete Steps :


Output : 



Here are the list of @HostListener events we can handle : 


  1. Mouse Events
    • @HostListener('click', ['$event']) - Fires when the host element is clicked.
    • @HostListener('dblclick', ['$event']) - Fires when the host element is double-clicked.
    • @HostListener('mousedown', ['$event']) - Fires when the mouse button is pressed down on the host element.
    • @HostListener('mouseup', ['$event']) - Fires when the mouse button is released on the host element.
    • @HostListener('mouseover', ['$event']) - Fires when the mouse pointer moves over the host element.
    • @HostListener('mouseout', ['$event']) - Fires when the mouse pointer moves out of the host element.
    • @HostListener('mousemove', ['$event']) - Fires when the mouse pointer moves within the host element.
  2. Keyboard Events
    • @HostListener('keydown', ['$event']) - Fires when a key is pressed down on the host element.
    • @HostListener('keyup', ['$event']) - Fires when a key is released on the host element.
    • @HostListener('keypress', ['$event']) - Fires when a key is pressed and released on the host element.
  3. Window Events
    • @HostListener('window:resize', ['$event']) - Fires when the browser window is resized.
    • @HostListener('window:scroll', ['$event']) - Fires when the browser window is scrolled.
    • @HostListener('window:beforeunload', ['$event']) - Fires before the window, the document, and its resources are about to be unloaded.
  4. Form Events
    • @HostListener('input', ['$event']) - Fires when the value of an <input>, <select>, or <textarea> element is changed.
    • @HostListener('change', ['$event']) - Fires when the value of an <input>, <select>, or <textarea> element is committed after changing.
    • @HostListener('submit', ['$event']) - Fires when a form is submitted.
  5. Drag and Drop Events
    • @HostListener('dragstart', ['$event']) - Fires when the user starts dragging an element.
    • @HostListener('dragover', ['$event']) - Fires when a dragged element is over a drop target.
    • @HostListener('drop', ['$event']) - Fires when a dragged element is dropped on a drop target.
  6. Animation Events
    • @HostListener('animationstart', ['$event']) - Fires when an animation starts.
    • @HostListener('animationend', ['$event']) - Fires when an animation completes.
    • @HostListener('animationiteration', ['$event']) - Fires when an animation iteration completes.
  7. Miscellaneous Events
    • @HostListener('focus', ['$event']) - Fires when the host element receives focus.
    • @HostListener('blur', ['$event']) - Fires when the host element loses focus.
    • @HostListener('touchstart', ['$event']) - Fires when a touch point is placed on the touch surface.
    • @HostListener('touchmove', ['$event']) - Fires when a touch point is moved along the touch surface.
    • @HostListener('touchend', ['$event']) - Fires when a touch point is removed from the touch surface.

Comments

Post a Comment

Popular posts from this blog

Finding Second largest number in Array - Java - TCS - Technical Interview

 Finding Second largest Number in Array :           1. First we need two variable called largest and second-largest. As next step, we need to use for-each loop to get the elements one by one.           2. Then as first condition is check whether value from the array is greater than largest.            3. If it is store the largest value into second-largest and value from the array into largest.            4. If not check another condition as value from the array is greater than second-largest and not equal to largest.            5. If this condition is true, store the value from the array into second-largest, is this if the second-largest value is value of last before(that is array.length-2 location).            6. It that condition also false do nothing, continue to next iteration. Co...
Read more

Checking Character only in String - Java 2024 - MNC - Technical Interview

 Checking if the String contains Character only     Get the input from the user using Scanner class. Then create a method to check the following condition. 1. Check if the string is null or empty, if it is directly return false. 2. Iterate the String using for loop inside the for loop, use the if for condition checking. 3. Condition is check the Character only, for this use the Character Wrapper class, in that we have  isAlphabetic() method to check the character. 4. This method will return true or false based on it is character or not. Code: package com.dinatechy.challange; import java.util.Scanner; public class CheckCharacter { public static void main(String[] args ) { //Check the String only contains Character or Not Scanner scan = new Scanner(System. in ); System. out .print( "Enter the String : " ); String data = scan .next(); scan .close(); boolean isChar = checkOnlyCharacter ( data ); System. out .println( isChar ? "Yes...
Read more

Object Class in Java | Article | Solution Maker - Blog

Solution Maker Understanding the Object Class in Java: Methods, Overriding, and Best Practices Introduction      The Object class in Java is the cornerstone of the Java class hierarchy. Every class in Java is directly or indirectly derived from the Object class, making it fundamental to understanding Java programming. In this blog post, we'll explore the key methods provided by the Object class, the implications of overriding these methods, and best practices for ensuring consistent behavior in your Java applications. Key Methods of the Object Class The Object class provides several essential methods that are inherited by all Java objects: toString() : Returns a string representation of the object. By default, it includes the class name and the ...
Read more