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 — Martin Parenteau
– Martin Parenteau, Commented Jul 31, 2018 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
– Freestyle09, Commented Jul 31, 2018 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: <aside [hidden]="!menu" (click)="handleClickAside(); $event.stopPropagation()"> (with handleClickAside() defined in component code). — Martin Parenteau
– Martin Parenteau, Commented Jul 31, 2018 at 15:56

Martin Parenteau · Accepted Answer · 2018-08-01 18:13:51Z

4

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

answered Aug 1, 2018 at 18:13

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siva · Accepted Answer · 2020-06-10 06:57:49Z

-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, 2020 at 6:57

Siva

1881 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 6 - click outside menu

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related