如何在外部单击以隐藏div？

Question

I know there are many such solutions on jQuery. But so far I can not adapt these solutions for myself with the help of Angular. I have an isOpenSharedLinkDiv variable that uses * ngIf to show or hide a div. I try to translate this value to false when I click outside of this div, but in this case the div does not open at all. I think I'm missing something.

test() {
    console.log(this.isOpenSharedLinkDiv);
    // const div = document.querySelector('#sharing-basket-div');
    const div = document.querySelector('.page');
    // const icon = document.querySelector('#sharing-basket-icon');
    const shareDiv = document.querySelector('#share');

    div.addEventListener('click', ev => {
      if (ev.target !== shareDiv || ev.target === div && this.isOpenSharedLinkDiv === true) {
        // this.isOpenSharedLinkDiv = false;
        console.log(ev.target);
        console.log(this.isOpenSharedLinkDiv);
      } else {
        return;
      }
    });
  }

As a result, this variable turns out to be false, even when it is not open yet.

Answer 1

You can use a really simple directive to do this:

import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[clickOutside]'
})
export class UnoClickOutsideDirective {
  constructor(private elementRef: ElementRef) {}

  @Output() clickOutside: EventEmitter<null> = new EventEmitter<null>();

  @HostListener('document:click', ['$event.target']) onMouseEnter(targetElement) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }
}

This directive applied to any element, tells you when you click outside of it. So you can use it with a div like this:

component.html

<div *ngIf="condition" (clickOutside)="condition=false"></div>

component.ts

condition: boolean = true;