Detectar clic fuera del componente angular

Si hallas algún error con tu código o trabajo, recuerda probar siempre en un entorno de testing antes aplicar el código al proyecto final.

Solución:

import  Component, ElementRef, HostListener, Input  from '@angular/core';

@Component(
  selector: 'selector',
  template: `
    

      text
    
  `
)
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';
  

Un ejemplo de trabajo – haga clic aquí

Una alternativa a la respuesta de AMagyar. Esta versión funciona cuando hace clic en el elemento que se elimina del DOM con un ngIf.

http://plnkr.co/edit/4mrn4GjM95uvSbQtxrAS?p=preview

  private wasInside = false;
  
  @HostListener('click')
  clickInside() 
    this.text = "clicked inside";
    this.wasInside = true;
  
  
  @HostListener('document:click')
  clickout() 
    if (!this.wasInside) 
      this.text = "clicked outside";
    
    this.wasInside = false;
  

La vinculación al clic del documento a través de @Hostlistener es costosa. Puede tener y tendrá un impacto visible en el rendimiento si lo usa en exceso (por ejemplo, al crear un componente desplegable personalizado y tiene varias instancias creadas en un formulario).

Sugiero agregar un @Hostlistener() al evento de clic del documento solo una vez dentro del componente principal de la aplicación. El evento debe enviar el valor del elemento de destino en el que se hizo clic dentro de un asunto público almacenado en un servicio de utilidad global.

@Component(
  selector: 'app-root',
  template: ''
)
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 = new Subject()

Cualquiera que esté interesado en el elemento de destino en el que se hizo clic debe suscribirse al tema público de nuestro servicio de utilidades y darse de baja cuando se destruya el componente.

export class AnotherComponent implements OnInit {

  @ViewChild('somePopup',  read: ElementRef, static: false ) somePopup: ElementRef

  constructor(private utilitiesService: UtilitiesService)  

  ngOnInit() 
      this.utilitiesService.documentClickedTarget
           .subscribe(target => this.documentClickListener(target))
  

  documentClickListener(target: any): void 
     if (this.somePopup.nativeElement.contains(target))
        // Clicked inside  
     else
        // Clicked outside
  

Puntuaciones y comentarios

Si te gusta este mundo, eres capaz de dejar una crónica acerca de qué te ha parecido este artículo.

---

---

Utiliza Nuestro Buscador