Categories
Angular Answers

How to dynamically add event listener with Angular?

Spread the love

Sometimes, we want to dynamically add event listener with Angular.

In this article, we’ll look at how to dynamically add event listener with Angular.

How to dynamically add event listener with Angular?

To dynamically add event listener with Angular, we can use the renderer.listenGlobal method.

For instance, we write

renderer.listenGlobal("document", "click", (event) => {
  // ...
});

to call renderer.listenGlobal with 'document', 'click' and an event handler to add the event handler as the event handler for the document‘s click event.

And then we can do what we want when the page is clicked in the event handler function.

Conclusion

To dynamically add event listener with Angular, we can use the renderer.listenGlobal method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *