Lo he hecho de esta manera.

Se agregó un detector de eventos en el documento click y en ese controlador se verificó si mi container contiene event.target, si no - ocultar el menú desplegable.

Se vería así.

@Component({})
class SomeComponent {
    @ViewChild('container') container;
    @ViewChild('dropdown') dropdown;

    constructor() {
        document.addEventListener('click', this.offClickHandler.bind(this)); // bind on doc
    }

    offClickHandler(event:any) {
        if (!this.container.nativeElement.contains(event.target)) { // check click origin
            this.dropdown.nativeElement.style.display = "none";
        }
    }
}

MÉTODO ELEGANTE: Encontré esta directiva clickOut : https://github.com/chliebel/angular2-click-outside

Lo compruebo y funciona bien (solo copio clickOutside.directive.ts a mi proyecto). U puede usarlo de esta manera:

<div (clickOutside)="close($event)"></div>

Donde close es su función que será llamada cuando el usuario haga clic fuera div. Es una forma muy elegante de manejar el problema descrito en cuestión.

= = = Código de directiva = = =

A continuación copio el código de la directiva original del archivo clickOutside.directive.ts (en caso de que enlace dejará de funcionar en el futuro) - el autor es Christian Liebel :

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}

Creo que Sasxa aceptó respuesta funciona para la mayoría de la gente. Sin embargo, tuve una situación, donde el contenido del Elemento, que debería escuchar eventos fuera de clic, cambió dinámicamente. Así que los Elementos nativeElement no contenían el evento.objetivo, cuando se creó dinámicamente. Podría resolver esto con la siguiente directiva

@Directive({
  selector: '[myOffClick]'
})
export class MyOffClickDirective {

  @Output() offClick = new EventEmitter();

  constructor(private _elementRef: ElementRef) {
  }

  @HostListener('document:click', ['$event.path'])
  public onGlobalClick(targetElementPath: Array<any>) {
    let elementRefInPath = targetElementPath.find(e => e === this._elementRef.nativeElement);
    if (!elementRefInPath) {
      this.offClick.emit(null);
    }
  }
}

En lugar de comprobar si ElementRef contiene event.destino, compruebo si ElementRef está en la ruta (ruta DOM al destino) del evento. De esa manera es posible para manejar elementos creados dinámicamente.

Hemos estado trabajando en un tema similar en el trabajo hoy, tratando de averiguar cómo hacer que un div desplegable desaparezca cuando se hace clic fuera de. La nuestra es ligeramente diferente a la pregunta inicial del póster porque no queríamos hacer clic lejos de un componente o directiva diferente, sino simplemente fuera del div en particular.

Terminamos solucionándolo usando el controlador de eventos (window:mouseup).

Pasos:
1.) Le dimos a todo el menú desplegable div a nombre de clase único.

2.) En el propio menú desplegable interno (la única parte en la que queríamos clics para NO cerrar el menú), agregamos un controlador de eventos (window:mouseup) y lo pasamos en el evento$.

NOTA: No se pudo hacer con un controlador típico de "clic" porque esto entraba en conflicto con el controlador de clic principal.

3.) En nuestro controlador, creamos el método que queríamos que se llamara en el evento click out, y usamos el evento.lo más cercano (docs here) a encontrar fuera si el punto clickeado está dentro de nuestro div de clase objetivo.

 autoCloseForDropdownCars(event) {
        var target = event.target;
        if (!target.closest(".DropdownCars")) { 
            // do whatever you want here
        }
    }

 <div class="DropdownCars">
   <span (click)="toggleDropdown(dropdownTypes.Cars)" class="searchBarPlaceholder">Cars</span>
   <div class="criteriaDropdown" (window:mouseup)="autoCloseForDropdownCars($event)" *ngIf="isDropdownShown(dropdownTypes.Cars)">
   </div>
</div>

Si estás haciendo esto en iOS, usa el evento touchstart también:

A partir de Angular 4, la HostListener decorar es la forma preferida de hacer esto

import { Component, OnInit, HostListener, ElementRef } from '@angular/core';
...
@Component({...})
export class MyComponent implement OnInit {

  constructor(private eRef: ElementRef){}

  @HostListener('document:click', ['$event'])
  @HostListener('document:touchstart', ['$event'])
  handleOutsideClick(event) {
    // Some kind of logic to exclude clicks in Component.
    // This example is borrowed Kamil's answer
    if (!this.eRef.nativeElement.contains(event.target) {
      doSomethingCool();
    }
  }

}

Podría crear un elemento hermano en el menú desplegable que cubra toda la pantalla que sería invisible y estaría allí solo para capturar eventos de clic. A continuación, puede detectar clics en ese elemento y cerrar el menú desplegable cuando se hace clic. Digamos que ese elemento es de clase serigrafía, aquí hay un estilo para él:

.silkscreen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

El z-index debe ser lo suficientemente alto como para posicionarlo por encima de todo menos de tu menú desplegable. En este caso mi menú desplegable sería b z-index 2.

Las otras respuestas funcionó en algunos casos para mí, excepto que a veces mi menú desplegable se cerraba cuando interactuaba con elementos dentro de él y no quería eso. Había agregado dinámicamente elementos que no estaban contenidos en mi componente, de acuerdo con el objetivo del evento, como esperaba. En lugar de arreglar ese lío, pensé que lo intentaría de la manera de la serigrafía.

Me gustaría complementar la respuesta @Tony, ya que el evento no se elimina después del clic fuera del componente. Recepción completa:

• Marque su elemento principal con # container

  @ViewChild('container') container;
  
  _dropstatus: boolean = false;
  get dropstatus() { return this._dropstatus; }
  set dropstatus(b: boolean) 
  {
      if (b) { document.addEventListener('click', this.offclickevent);}
      else { document.removeEventListener('click', this.offclickevent);}
      this._dropstatus = b;
  }
  offclickevent: any = ((evt:any) => { if (!this.container.nativeElement.contains(evt.target)) this.dropstatus= false; }).bind(this);
  

• En el elemento clickable, use:

  (click)="dropstatus=true"
  

Ahora puede controlar su estado desplegable con la variable dropstatus y aplicar las clases adecuadas con [ngClass]...

La respuesta correcta tiene un problema, si tiene un componente clicakble en su ventana emergente, el elemento ya no estará en el método contain y se cerrará, basado en @ JuHarm89 creé el mío propio:

export class PopOverComponent implements AfterViewInit {
 private parentNode: any;

  constructor(
    private _element: ElementRef
  ) { }

  ngAfterViewInit(): void {
    this.parentNode = this._element.nativeElement.parentNode;
  }

  @HostListener('document:click', ['$event.path'])
  onClickOutside($event: Array<any>) {
    const elementRefInPath = $event.find(node => node === this.parentNode);
    if (!elementRefInPath) {
      this.closeEventEmmit.emit();
    }
  }
}

Gracias por la ayuda!

import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'custom-dropdown',
    template: `
        <div class="custom-dropdown-container">
            Dropdown code here
        </div>
    `
})
export class CustomDropdownComponent {
    thisElementClicked: boolean = false;

    constructor() { }

    @HostListener('click', ['$event'])
    onLocalClick(event: Event) {
        this.thisElementClicked = true;
    }

    @HostListener('document:click', ['$event'])
    onClick(event: Event) {
        if (!this.thisElementClicked) {
            //click was outside the element, do stuff
        }
        this.thisElementClicked = false;
    }
}

DESVENTAJAS: - Dos oyentes de eventos de clic para cada uno de estos componentes en la página. No uses esto en componentes que están en la página cientos de veces.

Debería comprobar si hace clic en la superposición modal en su lugar, mucho más fácil.

Su plantilla:

<div #modalOverlay (click)="clickOutside($event)" class="modal fade show" role="dialog" style="display: block;">
        <div class="modal-dialog" [ngClass]='size' role="document">
            <div class="modal-content" id="modal-content">
                <div class="close-modal" (click)="closeModal()"> <i class="fa fa-times" aria-hidden="true"></i></div>
                <ng-content></ng-content>
            </div>
        </div>
    </div>

Y el método:

  @ViewChild('modalOverlay') modalOverlay: ElementRef;

// ... your constructor and other method

      clickOutside(event: Event) {
    const target = event.target || event.srcElement;
    console.log('click', target);
    console.log("outside???", this.modalOverlay.nativeElement == event.target)
    // const isClickOutside = !this.modalBody.nativeElement.contains(event.target);
    // console.log("click outside ?", isClickOutside);
    if ("isClickOutside") {
      // this.closeModal();
    }


  }

Si está usando Bootstrap, puede hacerlo directamente con bootstrap vía desplegables (componente Bootstrap).

<div class="input-group">
    <div class="input-group-btn">
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
            Toggle Drop Down. <span class="fa fa-sort-alpha-asc"></span>
        </button>
        <ul class="dropdown-menu">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>
</div>

Ahora está bien poner (click)="clickButton()" cosas en el botón. http://getbootstrap.com/javascript/#dropdowns

No hice ninguna solución. Acabo de adjuntar el documento: haga clic en mi función de palanca de la siguiente manera:

    @Directive({
      selector: '[appDropDown]'
    })
    export class DropdownDirective implements OnInit {

      @HostBinding('class.open') isOpen: boolean;

      constructor(private elemRef: ElementRef) { }

      ngOnInit(): void {
        this.isOpen = false;
      }

      @HostListener('document:click', ['$event'])
      @HostListener('document:touchstart', ['$event'])
      toggle(event) {
        if (this.elemRef.nativeElement.contains(event.target)) {
          this.isOpen = !this.isOpen;
        } else {
          this.isOpen = false;
      }
    }

Entonces, cuando estoy fuera de mi directiva, cierro el menú desplegable.

Una mejor versión para @Tony gran solución:

@Component({})
class SomeComponent {
    @ViewChild('container') container;
    @ViewChild('dropdown') dropdown;

    constructor() {
        document.addEventListener('click', this.offClickHandler.bind(this)); // bind on doc
    }

    offClickHandler(event:any) {
        if (!this.container.nativeElement.contains(event.target)) { // check click origin

            this.dropdown.nativeElement.closest(".ourDropdown.open").classList.remove("open");

        }
    }
}

En un archivo css: //NO es necesario si utiliza el menú desplegable bootstrap.

.ourDropdown{
   display: none;
}
.ourDropdown.open{
   display: inherit;
}

Puede escribir la directiva:

@Directive({
  selector: '[clickOut]'
})
export class ClickOutDirective implements AfterViewInit {
  @Input() clickOut: boolean;

  @Output() clickOutEvent: EventEmitter<any> = new EventEmitter<any>();

  @HostListener('document:mousedown', ['$event']) onMouseDown(event: MouseEvent) {

       if (this.clickOut && 
         !event.path.includes(this._element.nativeElement))
       {
           this.clickOutEvent.emit();
       }
  } 


}

En tu componente:

@Component({
  selector: 'app-root',
  template: `
    <h1 *ngIf="isVisible" 
      [clickOut]="true" 
      (clickOutEvent)="onToggle()"
    >{{title}}</h1>
`,
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  title = 'app works!';

  isVisible = false;

  onToggle() {
    this.isVisible = !this.isVisible;
  }
}

Esta directiva emite evento cuando el elemento html está contenido en DOM y cuando la propiedad de entrada [clickOut] es 'true'. Escuchar evento mousedown para manejar el evento antes de elemento se eliminará de DOM.

Y una nota: firefox no contiene la propiedad 'path' en el evento puedes usar la función para crear la ruta:

const getEventPath = (event: Event): HTMLElement[] => {
  if (event['path']) {
    return event['path'];
  }
  if (event['composedPath']) {
    return event['composedPath']();
  }
  const path = [];
  let node = <HTMLElement>event.target;
  do {
    path.push(node);
  } while (node = node.parentElement);
  return path;
};

Por lo que debe cambiar el controlador de eventos en la directiva: evento.el camino debe ser reemplazado getEventPath(event)

Este módulo puede ayudar. https://www.npmjs.com/package/ngx-clickout Contiene la misma lógica pero también maneja el evento esc en el elemento html de origen.

También hice una pequeña solución por mi cuenta.

He creado un (dropdownAbre) evento que escucho en mi componente ng-select element y llamo a una función que cerrará todos los demás SelectComponent abiertos aparte del SelectComponent abierto actualmente.

Modifiqué una función dentro del seleccione.ts archivo como a continuación para emitir el evento:

private open():void {
    this.options = this.itemObjects
        .filter((option:SelectItem) => (this.multiple === false ||
        this.multiple === true && !this.active.find((o:SelectItem) => option.text === o.text)));

    if (this.options.length > 0) {
        this.behavior.first();
    }
    this.optionsOpened = true;
    this.dropdownOpened.emit(true);
}

En el HTML agregué un detector de eventos para (dropdownAbened):

<ng-select #elem (dropdownOpened)="closeOtherElems(elem)"
    [multiple]="true"
    [items]="items"
    [disabled]="disabled"
    [isInputAllowed]="true"
    (data)="refreshValue($event)"
    (selected)="selected($event)"
    (removed)="removed($event)"
    placeholder="No city selected"></ng-select>

Esta es mi función de llamada en el desencadenador de eventos dentro del componente que tiene la etiqueta ng2-select:

@ViewChildren(SelectComponent) selectElem :QueryList<SelectComponent>;

public closeOtherElems(element){
    let a = this.selectElem.filter(function(el){
                return (el != element)
            });

    a.forEach(function(e:SelectComponent){
        e.closeDropdown();
    })
}

NOTA: Para aquellos que quieran usar web workers y que necesiten evitar usar document y nativeElement esto funcionará.

Respondí la misma pregunta aquí: https://stackoverflow.com/questions/47571144

Copiar / pegar desde el enlace anterior:

Tuve el mismo problema cuando estaba haciendo un menú desplegable y un diálogo de confirmación que quería descartar al hacer clic fuera.

Mi implementación final funciona perfectamente, pero requiere animaciones y estilos css3.

NOTA : no he probado el siguiente código, puede haber algunos problemas de sintaxis que necesitan ser resueltos, también los ajustes obvios para su propio proyecto!

Lo que hice:

Hice un div fijo separado con altura 100%, ancho 100% y transform: scale(0), esto es esencialmente el fondo, puede darle estilo con background-color: rgba(0, 0, 0, 0.466); para hacer obvio el menú está abierto y el fondo es haga clic para cerrar. El menú obtiene un índice z más alto que todo lo demás, luego el div de fondo obtiene un índice z más bajo que el menú pero también más alto que todo lo demás. Luego, el fondo tiene un evento de clic que cierra el menú desplegable.

Aquí está con su código html.

<div class="dropdownbackground" [ngClass]="{showbackground: qtydropdownOpened}" (click)="qtydropdownOpened = !qtydropdownOpened"><div>
<div class="zindex" [class.open]="qtydropdownOpened">
  <button (click)="qtydropdownOpened = !qtydropdownOpened" type="button" 
         data-toggle="dropdown" aria-haspopup="true" [attr.aria-expanded]="qtydropdownOpened ? 'true': 'false' ">
   {{selectedqty}}<span class="caret margin-left-1x "></span>
 </button>
  <div class="dropdown-wrp dropdown-menu">
  <ul class="default-dropdown">
      <li *ngFor="let quantity of quantities">
       <a (click)="qtydropdownOpened = !qtydropdownOpened;setQuantity(quantity)">{{quantity  }}</a>
       </li>
   </ul>
  </div>
 </div>

Aquí está el css3 que necesita algunas animaciones simples.

/* make sure the menu/drop-down is in front of the background */
.zindex{
    z-index: 3;
}

/* make background fill the whole page but sit behind the drop-down, then
scale it to 0 so its essentially gone from the page */
.dropdownbackground{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
    transform: scale(0);
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.466);
}

/* this is the class we add in the template when the drop down is opened
it has the animation rules set these how you like */
.showbackground{
    animation: showBackGround 0.4s 1 forwards; 

}

/* this animates the background to fill the page
if you don't want any thing visual you could use a transition instead */
@keyframes showBackGround {
    1%{
        transform: scale(1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

Si no buscas nada visual, puedes usar una transición como esta

.dropdownbackground{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
    transform: scale(0);
    opacity: 0;
    transition all 0.1s;
}

.dropdownbackground.showbackground{
     transform: scale(1);
}