"click outside" to hide popper

Hi guys, today I’m using this awesome library(solved my problem the show popover correctly inside of a calendar[fullcalendar]).

I needed this feature, but I solved using only Angular,

1. you need create a directive( clickOutside):

import { Directive, ElementRef, Output, EventEmitter, HostListener } from ‘@angular/core’;

@Directive({ selector: ‘[clickOutside]’ }) export class ClickOutsideDirective { constructor (private _elementRef: ElementRef) {}

@Output() public clickOutside = new EventEmitter<MouseEvent>();

@HostListener(‘document:click’, [‘$event’, ‘$event.target’]) public onClick(event: MouseEvent, targetElement: HTMLElement): void { if (!targetElement) { return; }

const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
  this.clickOutside.emit(event);
}

} }

so in the template, I did this: <popper-content #popMedicineContent (clickOutside)="popMedicineContent.hide()"> .... </popper-content>

Regards,

[MrFrankel]

Just released version 1.6.0. you can now set: popperTimeoutAfterShow, which will always hide the popper-content after the specific time after its shown. popperTimeout, which will hide the popper at a delay when a hide event is triggered. popperCloseOnClickOutside, default to true, in case you dont want the popper to close on a click outside

Let me know if this suites your use case.

[johnny4young]

I would like it!!!