I'm creating a click event to document that close my aside menu, I created example in jquery but i don't want to do this in jquery and I cannot access to 'menu' variable.

How can I write this in pure angular ?

import { Component, HostListener, ElementRef } from "@angular/core";
import { Router } from "../../node_modules/@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./appponent.html",
  styleUrls: ["./appponent.scss"]
})
export class AppComponent {
  menu: boolean;
  date = new Date();

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.menu = false;
    } else {
      console.log('clicked outside');
    }
  }

  constructor(public router: Router,
              private eRef: ElementRef) {}

  showMenu() {
    this.menu = !this.menu;
  }


}

EDIT I edited code from duplicate, but I have different idea

Is there other HostListener to ignore aside and button with id ? Or am I thinking wrong ?

When i click on aside or button menu this clickout event must not working, when i click anywhere else it should set me this.menu to false.

<aside id="aside" [hidden]="!menu">
  <button class="menu-btn" (click)="menu = false" routerLink="/">Strona Główna</button>
  <button (click)="menu = false" routerLink="/cv">CV</button>
  <button (click)="menu = false" routerLink="/bio">BIO</button>
  <button (click)="menu = false" routerLink="/portfolio">Portfolio</button>
  <button (click)="menu = false" routerLink="/kontakt">Kontakt</button>
</aside>
<button id="menu-btn" [class.aside]="menu" (click)="showMenu()">Klik</button>

I'm creating a click event to document that close my aside menu, I created example in jquery but i don't want to do this in jquery and I cannot access to 'menu' variable.

How can I write this in pure angular ?

import { Component, HostListener, ElementRef } from "@angular/core";
import { Router } from "../../node_modules/@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.ponent.html",
  styleUrls: ["./app.ponent.scss"]
})
export class AppComponent {
  menu: boolean;
  date = new Date();

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.menu = false;
    } else {
      console.log('clicked outside');
    }
  }

  constructor(public router: Router,
              private eRef: ElementRef) {}

  showMenu() {
    this.menu = !this.menu;
  }


}

EDIT I edited code from duplicate, but I have different idea

Is there other HostListener to ignore aside and button with id ? Or am I thinking wrong ?

When i click on aside or button menu this clickout event must not working, when i click anywhere else it should set me this.menu to false.

<aside id="aside" [hidden]="!menu">
  <button class="menu-btn" (click)="menu = false" routerLink="/">Strona Główna</button>
  <button (click)="menu = false" routerLink="/cv">CV</button>
  <button (click)="menu = false" routerLink="/bio">BIO</button>
  <button (click)="menu = false" routerLink="/portfolio">Portfolio</button>
  <button (click)="menu = false" routerLink="/kontakt">Kontakt</button>
</aside>
<button id="menu-btn" [class.aside]="menu" (click)="showMenu()">Klik</button>

• javascript
• jquery
• angular
• html
• typescript

• Possible duplicate of Detect click outside Angular ponent – Martin Parenteau Commented Jul 31, 2018 at 15:13
• Can you post the html code? – Sharan Mohandas Commented Jul 31, 2018 at 15:23
• @ConnorsFan Yup it works, but i see answers in console.log() instead of displaying text, and when i click only on button it shows me clicked outside, anywhere else shows clicked inside, I want to show me 'clicked inside' inside of aside element and only there, anywhere else should display outside, Is there something like @HostListener('aside') ??? – Freestyle09 Commented Jul 31, 2018 at 15:37
• 2 You could handle the click event in the aside element, and stop the propagation to avoid the click handler at the document level: <aside [hidden]="!menu" (click)="handleClickAside(); $event.stopPropagation()"> (with handleClickAside() defined in ponent code). – Martin Parenteau Commented Jul 31, 2018 at 15:56
• Add this as an answer, great work thank you! – Freestyle09 Commented Jul 31, 2018 at 16:07

2 Answers 2

As suggested in this answer, you can detect the document click events with HostListener. To make sure that mouse clicks don't reach the document when the menu is clicked, you should stop the propagation of the event in the click event handler set on the aside element:

<aside [hidden]="!menu" (click)="handleAsideClick($event)">

@HostListener('document:click', ['$event']) clickout(event) {
  // Click outside of the menu was detected
  ...
}

handleAsideClick(event: Event) {
  event.stopPropagation(); // Stop the propagation to prevent reaching document
  ...
}

If you want to simply click outside a menu, you can programmatically trigger a click on the document body with:

document.body.click();