Angular EventManager - addEventListener

Angular EventManager is an essential part of Angular's event architecture. It is responsible for handling events and making sure that the event is propagated to the right place in the DOM.

The addEventListener() method is used to attach an event listener to an element. You can use this method to listen to DOM events such as click, mouseover, and keypress.

Syntax

element.addEventListener(event, function, useCapture)

• element - The element to attach the event listener to.
• event - The event to listen for (e.g. "click", "mouseover", "keypress").
• function - The function to be executed when the event is fired.
• useCapture - An optional Boolean value that indicates whether the event should be executed in the capture phase (true) or the bubbling phase (false, default).

Examples

Example 1 - Adding an event listener

// Get the element
const myButton = document.querySelector('#my-button');

// Define the event listener function
const myFunction = (event) => {
  console.log('Button clicked!');
};

// Add the event listener
myButton.addEventListener('click', myFunction);

Example 2 - Removing an event listener

// Get the element
const myButton = document.querySelector('#my-button');

// Define the event listener function
const myFunction = (event) => {
  console.log('Button clicked!');
};

// Add the event listener
myButton.addEventListener('click', myFunction);

// Remove the event listener
myButton.removeEventListener('click', myFunction);

Conclusion

Angular EventManager and the addEventListener() method are powerful tools that allow you to handle events in your Angular application. With these tools, you can create interactive and responsive user interfaces that provide a great user experience.