html - input value angular 4

Detectar clics fuera del componente angular

Question

¿Cómo puedo detectar clics fuera de un componente en Angular?

Answer 1

Las respuestas mencionadas anteriormente son correctas, pero ¿qué pasa si está haciendo un proceso pesado después de perder el enfoque del componente relevante? Para eso, llegué con una solución con dos indicadores donde el proceso de evento de enfoque solo tendrá lugar cuando se pierda el enfoque solo del componente relevante.

isFocusInsideComponent = false;
isComponentClicked = false;

@HostListener(''click'')
clickInside() {
    this.isFocusInsideComponent = true;
    this.isComponentClicked = true;
}

@HostListener(''document:click'')
clickout() {
    if (!this.isFocusInsideComponent && this.isComponentClicked) {
        // do the heavy process

        this.isComponentClicked = false;
    }
    this.isFocusInsideComponent = false;
}

Espero que esto te ayudará. Corrígeme si te has perdido algo.

Answer 2

Puede usar el método clickOutside () desde https://www.npmjs.com/package/ng-click-outside package

Answer 3

Una alternativa a la respuesta de AMagyar. Esta versión funciona cuando hace clic en un 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;
  }

Answer 4

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

@Component({
  selector: ''selector'',
  template: `
    <div>
      {{text}}
    </div>
  `
})
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í