Search code examples
javascripthtmlfrontendangular7bootstrap-popover

Close ngbPopover on click outside anywhere other than scrollbar

I am using an ngpopover in my Angular 7 project to help user select date range. I have created a daterange component implementing Onchanges and I am importing this wherever I need the ngbpopover.

What I want to do.

I want that when user clicks on scrollbar of window the popover should not autoclose but if user clicks anywhere outside the popover the popup should autoclose.

My code

HTML FILE

<div (scroll) = "onScroll($event)">
<ng-template #popContent>
------
</ng-template>


 <button type="button" class="btn btn-date-selector" [placement]="defaultPlacement" 
 [ngbPopover]="popContent" [autoClose]="false" data-container="body" #popOver="ngbPopover">
 </div>

I had tried to using scroll event to get to know when the user scrolls on a particular page TS FILE

@HostListener('window:scroll', ['$event']) private onScroll($event:Event) {
console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
};

But the hostlistener is not working.

Since I am calling the Date-range component inside my main html page as a child component how can I even check for window scroll over the parent component?

Is there any way I can check if the user has clicked outside the popOver and just not on the window scrollbar?

Solution

  • Finally i have been able to do what i desired. I created a method

    (click)= onDateSelection($event) in my Datepicker HTML file

    In my ts file i added functionality like this added a viewchild for ngbPopOver

    @ViewChild('popOver') public popover: NgbPopover;

onDateSelection(event) {

 //after selection of date
 this.popover.close();
 
}

    So that after Date is getting selected and emitted the Datepicker module should get closed on it's own.