How to detect a click event in any area of an Angular2

Question

How to detect a click event in any area of an Angular2

Hey there, I'm new to typescript and angular 2 and I've encountered an error in my code. Can someone lend me a hand in fixing this?

import { Component, HostListener } from '@angular/core'  
export class TooltipComponent {
    public show: boolean = false;

    @HostListener('document:click',['$event'])    

    documentClick(event: MouseEvent) {
        this.show = false;    
    }

    showTooltip() {
        this.show = true;
        this.documentClick('????');    
    }
}

javascript angular typescript

Answer 1

Answer №1

  @HostListener('document:click', ['$event'])
  public handleDocumentClick(event: Event): void {
    //performAction() --> Your custom logic for handling document clicks
  }

The question may be a bit ambiguous, but the code provided will execute when a click event occurs on the document.

Answer 2

  @HostListener('document:click', ['$event'])
  public handleDocumentClick(event: Event): void {
    //performAction() --> Your custom logic for handling document clicks
  }

The question may be a bit ambiguous, but the code provided will execute when a click event occurs on the document.

Answer 3

Answer №2

Here is an alternative method to register a listener on the DOCUMENT (check out this Plunker example):

import {Component, Inject, OnInit, HostListener, VERSION} from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";

@Component({
  selector: 'demo-app',
  template: `
    <div>
      {{ text }}
    </div>
  `
})
export default class DemoAppComponent implements OnInit{

  public text: string
  public show: boolean

  //constructor
  constructor(@Inject(DOCUMENT) private document: Document) {

    document.addEventListener('click', this.onDocument1Click);
    this.text =  "Angular " + VERSION.full
  }

  //init
  ngOnInit() { }

  onDocument1Click(){
    this.show = !this.show
    alert(this.show)
  }


  //add hostlistner on document:click
  //@HostListener("document:click", ['$event'])
  //onDocumentClick(event: Event): void {
  //  this.show = !this.show
  //  alert(this.show)
  //}

}

Answer 4

Here is an alternative method to register a listener on the DOCUMENT (check out this Plunker example):

import {Component, Inject, OnInit, HostListener, VERSION} from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";

@Component({
  selector: 'demo-app',
  template: `
    <div>
      {{ text }}
    </div>
  `
})
export default class DemoAppComponent implements OnInit{

  public text: string
  public show: boolean

  //constructor
  constructor(@Inject(DOCUMENT) private document: Document) {

    document.addEventListener('click', this.onDocument1Click);
    this.text =  "Angular " + VERSION.full
  }

  //init
  ngOnInit() { }

  onDocument1Click(){
    this.show = !this.show
    alert(this.show)
  }


  //add hostlistner on document:click
  //@HostListener("document:click", ['$event'])
  //onDocumentClick(event: Event): void {
  //  this.show = !this.show
  //  alert(this.show)
  //}

}

Answer 5

Answer №3

Perhaps you could consider creating a fresh component, specifying a host property within it, and incorporating other components

An alternative is to utilize the (document:click) event:

@Component({
  host: {
    '(document:click)': 'onClick($event)',
  },
})
class AnotherComponent() {
  constructor(private _eref: ElementRef) { }

  onClick(event) {
     // Your implementation goes here...
  }
}

Answer 6

Perhaps you could consider creating a fresh component, specifying a host property within it, and incorporating other components

An alternative is to utilize the (document:click) event:

@Component({
  host: {
    '(document:click)': 'onClick($event)',
  },
})
class AnotherComponent() {
  constructor(private _eref: ElementRef) { }

  onClick(event) {
     // Your implementation goes here...
  }
}

Answer 7

Answer №4

Here is the corrected version:

import {ChangeDetectorRef, Renderer } from '@angular/core';

export class TooltipComponent {

    public isVisible: boolean = false;

    clickHandler: Function;

    constructor(
        private elementReference: ElementRef,
        private renderService: Renderer,
    ) {
        this.clickHandler = renderService.listenGlobal(
            'document',
            'click',
            (event: MouseEvent) => this.handleDocumentClick(event)
        );
    }

    handleDocumentClick(event: MouseEvent) {
        console.log(event.target);
        if (!this.elementReference.nativeElement.contains(event.target)) {
            this.isVisible = false;
        }
    }
}

Answer 8

Here is the corrected version:

import {ChangeDetectorRef, Renderer } from '@angular/core';

export class TooltipComponent {

    public isVisible: boolean = false;

    clickHandler: Function;

    constructor(
        private elementReference: ElementRef,
        private renderService: Renderer,
    ) {
        this.clickHandler = renderService.listenGlobal(
            'document',
            'click',
            (event: MouseEvent) => this.handleDocumentClick(event)
        );
    }

    handleDocumentClick(event: MouseEvent) {
        console.log(event.target);
        if (!this.elementReference.nativeElement.contains(event.target)) {
            this.isVisible = false;
        }
    }
}

How to detect a click event in any area of an Angular2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retrieve data from a specific page on a URL using AJAX

Attach an event listener to the HTML content

Prevent the Mat Dialog from showing up depending on the situation

The server has sent cookies headers, however, the browser did not store the cookies

No routes found to match. URL Segment: ''. This issue occurs when attempting to utilize child routes with Angular 2

The index declaration file has not been uploaded to NPM

The issue you're encountering in React Native Expo is a restriction where Hooks can only be invoked within the body of a function

What is the best way to run tests on this method using Jest?

React's constructor being invoked twice

jquery unable to retrieve element

The 'ReactNode' binding element is automatically assigned an 'any' type

Why is my Javascript XMLHttpRequest onreadystatechanged event not triggering?

Why would someone opt to utilize process.env.PORT in their code?

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard

The issue persists with the $slice function in MongoDb

Encountering an issue in Angular 8 flex-layout 8: Unable to export member ɵNgClassImpl

Steps for Loading HTML5 Video Element in Ionic 2

JavaScript's GET method fails to retrieve the complete JSON file

Symfony2 and asynchronous JavaScript and XML (AJAX)

Compiling Vue.js without the need for a build tool