How to close an element on clicking outside in Angular?

Question

I use Popper js to show a tooltip, I show this after clicking on a button.

I use this element (button with tooltip) several times on the page. Now I try to close the element when clicking outside the element.

This does not work correctly, when clicking outside the element it shows all other popups.

Well I just want to close only the tooltip that is open. I have created a directive for this and also used the ng-click-outside package.

I can't get this to work for either. There are some similar questions, but still not a solution.

My code for the button and popup:

<button 
    *ngIf="popupText"
    type="button" 
    id="i-button-{{element.id}}"
    class="i-button"
    [ngClass]="{'active': showPopper}"
    (click)="toggle()">
</button>

<div 
    *ngIf="popupText"
    id="popper-{{id}}"
    [ngClass]="{'active': showPopper}"
    class="i-text-popper"
    [hidden]="!showPopper"
    (clickOutside)="toggle()" 
    [delayClickOutsideInit]="true"
    [attachOutsideOnClick]="true" >
        <p class="popper-content" [innerHTML]="popupText"></p>
        <span class="popper-close close-icon" (click)="toggle()"></span>
</div>

Toggle function:

toggle() {
    this.popper.update();
    this.showPopper = !this.showPopper;
}

clickOutside directive:

import {
    Directive,
    ElementRef,
    EventEmitter,
    Output,
    HostListener
  } from '@angular/core';
  
  @Directive({
    selector: '[clickOutside]',
  })
  export class ClickOutsideDirective {
    @Output('onClickOutside') onClickOutside = new EventEmitter<MouseEvent>();
  
    constructor(private _eref: ElementRef) {}
  
    @HostListener('document:click', ['$event', '$event.target'])
    onDocumentClicked(event: MouseEvent, targetElement: HTMLElement) {
      if (targetElement && document.body.contains(targetElement) && !this._eref.nativeElement.contains(targetElement)) {
        this.onClickOutside.emit(event);
      }
    }
  }

Tried also to use https://www.npmjs.com/package/ng-click-outside But it is still not possible to close only the element which is active instead of showing/closing all buttons.

How can I only close the tooltip which is active when clicking outside the element?

score 0 · Answer 1 · answered Jul 27 '20 at 13:31

Found a solution, but still not 100% correct.

<button 
    *ngIf="popupText"
    type="button" 
    id="i-button-{{element.id}}"
    class="i-button"
    [ngClass]="{'active': showPopper}"
    (click)="toggle($event)">
</button>

<div 
    *ngIf="popupText"
    id="popper-{{id}}"
    class="i-text-popper"
    [hidden]="!showPopper"
    (click)="$event.stopPropagation()" >
        <p class="popper-content" [innerHTML]="popupText"></p>
        <span class="popper-close close-icon" (click)="toggle($event)"></span>
</div>

Toggle function:

toggle($event:any) {
   this.popper.update();
   $event.stopPropagation();
   this.showPopper = !this.showPopper;
}

@HostListener('document:click', ['$event']) onDocumentClick($event:any) {
  this.showPopper = false;
}

It's now closing the correct element when clicking outside the element. But the issue now is that when there is a popup open and I click again a new button it will show two popups instead of 1. The first popup doesn't close now.

How to close an element on clicking outside in Angular?

1 Answers1