¿Cómo detectar un evento de clic fuera del componente Angular?

En angular, los clics se detectan de diferentes maneras. Como el clic es un evento, dentro de un componente se detecta mediante un simple enlace de eventos. Un simple clic a través del enlace de eventos para la detección dentro del componente se proporciona de la siguiente manera:

@Component({
  selector: "geeks",
  template: `
<h1 (click)="clicked()">{{ some_text }}</h1>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  clicked() {
    this.some_text = "Event Triggered";
  }
}

Para continuar con la detección de clics fuera del componente, el decorador @HostListener se usa en angular. Es un decorador que declara un evento DOM para escuchar y proporciona un enlace con un método de controlador para ejecutar cada vez que ocurra ese evento.

Enfoque: aquí el enfoque es usar el decorador @HostListener . En angular, es un decorador que ayuda a capturar cualquier tipo de evento que ocurra dentro del DOM y brinda al desarrollador flexibilidad para realizar cualquier acción basada en ese evento. Aquí, en el evento de clic simple, el controlador referirá el evento de clic al componente y para hacer clic en todo el DOM, lo capturará usando document:click .

La sintaxis para usar HostListener es la siguiente:

Sintaxis:

@HostListener(events, args)
handler_name(args){
  // Do something
}

Hay tres cosas a tener en cuenta en la sintaxis de HostListener:

1. eventName: como sugiere el nombre, esto toma el nombre del evento en el DOM, que necesita ser escuchado.
2. args: estos son un conjunto de argumentos para pasar al método del controlador cuando ocurre el evento. Toma entrada en formato de lista.
3. handlen_name: aquí viene la definición del método que se llamará cuando se active el evento. Es llamado por HostListener automáticamente.

Ejemplo: Vincular con clic dentro del componente Para vincular el clic dentro del componente, el eventName que irá dentro de hostListener será simplemente ‘clic’. El código anterior en tal caso se escribirá como:

@Component({
  selector: "geeks",
  template: `
    <h1>{{ some_text }}</h1>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  @HostListener("click")
  clicked() {
    this.some_text = "Event Triggered";
  }
}

Producción:

Aquí no es necesario pasar argumentos para que se ejecute el controlador. HostListener toma ‘clic’ como el evento que activó el método en el que se hizo clic.

Vincular con clic fuera del componente
Para la detección del clic fuera del componente, se debe observar otro evento. Aquí el clic no funcionará ya que detecta un clic dentro del componente. Aquí la clave buscará hacer clic dentro del DOM y no solo el componente, y por lo tanto ‘document:click’ será la opción correcta para eso y también al mismo tiempo necesitamos filtrar el evento dentro del componente que está hecho. por la variable booleana ‘dentro’. Entonces, en el código dado a continuación, se agregará otro componente que actuará como contexto externo, pero hacer clic en eso provocará el evento de clic en el componente actual.

@Component({
  selector: "another",
  template: `
    <div style="border-style: solid;margin:5px;">
      <h1>Outside Component</h1>
      <h2>Click here for outer component trigger</h2>
    </div>
    <geeks></geeks>
  `
})
export class AnotherComponent {
  constructor() {}
}
@Component({
  selector: "geeks",
  template: `
    <div style="border-style:solid;margin:5px;">
      <h1>Inner Component</h1>
      <h2>{{ some_text }}</h2>
    </div>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  inside = false;
  @HostListener("click")
  clicked() {
    this.inside = true;
  }
  @HostListener("document:click")
  clickedOut() {
    this.some_text = this.inside
      ? "Event Triggered"
      : "Event Triggered Outside Component";
    this.inside = false;
  }
}

Salida:

En este ejemplo, si se hace clic en el texto ‘Componente externo’, el texto que se muestra será ‘Componente externo activado por evento’. Esto muestra cómo se capturará el clic fuera del componente, dentro de GeeksComponent.