Angular 6 - click outside menu

Question

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.component.html",
  styleUrls: ["./app.component.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>

Possible duplicate of [Detect click outside Angular component](https://stackoverflow.com/questions/40107008/detect-click-outside-angular-component) — ConnorsFan, Jul 31 '18 at 15:13
@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, Jul 31 '18 at 15:37
You could handle the `click` event in the `aside` element, and stop the propagation to avoid the click handler at the document level: `
` (with `handleClickAside()` defined in component code). — ConnorsFan, Jul 31 '18 at 15:56

score 4 · Accepted Answer · answered Aug 01 '18 at 18:13

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
  ...
}

score -1 · Answer 2 · answered Jun 10 '20 at 06:57

-1

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

document.body.click();

answered Jun 10 '20 at 06:57

Siva

170
1
3
11

Angular 6 - click outside menu

2 Answers2