Detect click outside Angular component

Question

How can I detect clicks outside a component in Angular

User · Answer

An alternative to AMagyar s answer  This version works when you click on element that gets removed from the DOM with an ngIf   http   plnkr co edit 4mrn4GjM95uvSbQtxrAS p preview   x000D   x000D    private wasInside   false  x000D     x000D     HostListener  click   x000D    clickInside     x000D      this text    clicked inside   x000D      this wasInside   true  x000D      x000D     x000D     HostListener  document click   x000D    clickout     x000D      if   this wasInside    x000D        this text    clicked outside   x000D        x000D      this wasInside   false  x000D      x000D   x000D   x000D

User · Answer

import   Component  ElementRef  HostListener  Input   from   angular core     Component     selector   selector     template         lt div gt          text        lt  div gt         export class AnotherComponent     public text  String      HostListener  document click      event      clickout event        if this eRef nativeElement contains event target           this text    clicked inside         else         this text    clicked outside                constructor private eRef  ElementRef        this text    no clicks yet           A working example - click here

User · Answer

Binding to document click through  Hostlistener is costly  It can and will have a visible performance impact if you overuse for example  when building a custom dropdown component and you have multiple instances created in a form    I suggest adding a  Hostlistener   to the document click event only once inside your main app component  The event should push the value of the clicked target element inside a public subject stored in a global utility service    Component     selector   app-root     template    lt router-outlet gt  lt  router-outlet gt      export class AppComponent      constructor private utilitiesService  UtilitiesService         HostListener  document click      event      documentClick event  any   void       this utilitiesService documentClickedTarget next event target          Injectable   providedIn   root     export class UtilitiesService      documentClickedTarget  Subject lt HTMLElement gt    new Subject lt HTMLElement gt        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   export class AnotherComponent implements OnInit       ViewChild  somePopup     read  ElementRef  static  false    somePopup  ElementRef    constructor private utilitiesService  UtilitiesService         ngOnInit           this utilitiesService documentClickedTarget             subscribe target   gt  this documentClickListener target          documentClickListener target  any   void        if  this somePopup nativeElement contains target              Clicked inside        else            Clicked outside

User · Answer

You can useclickOutside   method from https   www npmjs com package ng-click-outside package

User · Answer

ginalx s answer should be set as the default one imo  this method allows for many optimizations    The problem  Say that we have a list of items and on every item we want to include a menu that needs to be toggled  We include a toggle on a button that listens for a click event on itself  click   toggle     but we also want to toggle the menu whenever the user clicks outside of it  If the list of items grows and we attach a  HostListener  document click   on every menu  then every menu loaded within the item will start listening for the click on the entire document  even when the menu is toggled off  Besides the obvious performance issues  this is unnecessary   You can  for example  subscribe whenever the popup gets toggled via a click and start listening for  outside clicks  only then    isActive  boolean   false      to prevent memory leaks and improve efficiency  the menu    gets loaded only when the toggle gets clicked private  toggleMenuSubject   BehaviorSubject lt boolean gt   private  toggleMenu   Observable lt boolean gt    private  toggleMenuSub  Subscription  private  clickSub  Subscription   null    constructor        private  utilitiesService  UtilitiesService   private  elementRef  ElementRef           this  toggleMenuSubject    new BehaviorSubject false    this  toggleMenu    this  toggleMenuSubject  asObservable        ngOnInit      this  toggleMenuSub   this  toggleMenu  pipe        tap isActive   gt            logger debug  Label Menu is active   isActive          this isActive   isActive              subscribe to the click event only if the menu is Active            otherwise unsubscribe and save memory         if isActive     true             this  clickSub   this  utilitiesService documentClickedTarget             subscribe target   gt  this  documentClickListener target             else if isActive     false  amp  amp  this  clickSub     null             this  clickSub unsubscribe                                  other observable logic                   subscribe       toggle         this  toggleMenuSubject  next  this isActive      private  documentClickListener targetElement  HTMLElement   void       const clickedInside   this  elementRef nativeElement contains targetElement       if   clickedInside          this  toggleMenuSubject  next false                 ngOnDestroy     this  toggleMenuSub unsubscribe         And  in   component html     lt button  click   toggle    gt Toggle the menu lt  button gt

User · Answer

u can call event function like  focusout  or  blur  then u put your code  lt div tabindex 0  blur   quot outsideClick   quot  gt raw data  lt  div gt      outsideClick       alert  put your condition here

User · Answer

Improving  J  Frankenstein answear  x000D   x000D        HostListener  click     clickInside  event        this text    clicked inside        event stopPropagation              HostListener  document click     clickOutside           this text    clicked outside       x000D   x000D   x000D

User · Answer

Above mentioned answers are correct but what if you are doing a heavy process after losing the focus from the relevant component  For that  I came with a solution with two flags where the focus out event process will only take place when losing the focus from relevant component only   isFocusInsideComponent   false  isComponentClicked   false    HostListener  click   clickInside         this isFocusInsideComponent   true      this isComponentClicked   true      HostListener  document click   clickout         if   this isFocusInsideComponent  amp  amp  this isComponentClicked               do the heavy process          this isComponentClicked   false            this isFocusInsideComponent   false      Hope this will help you  Correct me If have missed anything

[html] Detect click outside Angular component

Examples related to html

Examples related to events

Examples related to angular

Examples related to typescript