I could solve this with the following directive. rev2023.5.1.43405. To learn more, see our tips on writing great answers. propagation of the current event in the capturing and bubbling phases. 565), Improving the copy in the close modal and post notices - 2023 edition, New blog post from our CEO Prashanth: Community is the future of AI. For more detailed instructions, this blog article seems to be a good source: How to close a `div` box in Angular when I click outside of it.Without using jQuery, How a top-ranked engineering school reimagined CS curriculum (Ep. Here is the HTML for the example. In that case, simply use onblur html event; The element does not have focus but its container can detect a mouseclick. Which language's style guidelines should be used when writing code that is supposed to be called from another language? $event.stopPropagation() is to prevent the triggering click event of document. Can corresponding author withdraw a paper after it has accepted without permission/acceptance of first author. How do you use a variable in a regular expression? Why don't we use the 7805 for car phone chargers? Whoever is interested for the clicked target element should subscribe to the public subject of our utilities service and unsubscribe when the component is destroyed. Just add class to DOM nodes of popup & outside of popup (or on appOutside element). Asking for help, clarification, or responding to other answers. Is a downhill scooter lighter than a downhill MTB with same performance? Site design / logo 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA. It just takes the element you're going to listen on as the first argument which can be window, document, body or any other element reference. But this is time it is not working in angular2. The trick would be to prevent click events from bubbling up from your dialog. How do the interferometers on the drag-free satellite LISA receive power without altering their geodesic trajectory? I think Sasxa accepted answer works for most people. If event.target is an element that was added dynamically through something like an [innerHTML] binding then the elementRef's nativeElement will not contain it. stackoverflow.com/questions/35024495#35024651, tracking-click-events-outside-the-current-component, selectors-and-outputs-can-have-the-same-name, https://github.com/chliebel/angular2-click-outside, https://www.npmjs.com/package/ngx-clickout, http://getbootstrap.com/javascript/#dropdowns, https://stackoverflow.com/questions/47571144, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus, https://stackblitz.com/edit/angular-sv4tbi?file=src%2Ftoggle-dropdown%2Ftoggle-dropdown.directive.ts, How a top-ranked engineering school reimagined CS curriculum (Ep. Here is my plunker. You would then use the directive like so: Here's a reusable directive, it also cover the case if the element is inside an ngIf: Credits to https://github.com/ngez/platform, I got most of the logic out of it. Super complicated. How can I set the default value for an HTML
