Détecter le clic en dehors du composant angulaire

Question

Comment détecter les clics hors d' un composant dans Angular?

Answer 1

 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';
  }
}
 

Exemple de travail Plunker - cliquez ici

Answer 2

Une alternative à AMagyar de réponse. Cette version fonctionne lorsque vous cliquez sur l'élément qui est supprimé à partir du DOM avec 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 3

Vous pouvez utiliser la méthode useclickOutside () à partir du paquet https://www.npmjs.com/package/ng-click-outside