Cannot close ngb-datepicker with .close() (.close() is not a function) - html

Question

I am attempting to set up a ngb-datepicker to close on clicking outside of it. I am however receiving this error:
GamesComponent.html:9 ERROR TypeError: dp.close is not a function
at GamesComponent.push../src/web/apps/command-center/games/games.component.ts.GamesComponent.closeCalendar (games.component.ts:202)
at Object.eval [as handleEvent] (GamesComponent.html:12)
at handleEvent (core.js:10050)
at callWithDebugContext (core.js:11143)
at Object.debugHandleEvent [as handleEvent] (core.js:10846)
at dispatchEvent (core.js:7509)
at core.js:7953
at HTMLDocument.<anonymous> (platform-browser.js:1140)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3748)
The relevant html is below
<ng-template #popContent class="col-lg-3 align-items-center">
<ngb-datepicker (select)="convertNgbDatetoDate($event)"
name="dp" ngbDatepicker #d="ngbDatepicker"
(blur)="onInputBlur()"
(document:click)="closeCalendar($event, d)">
</ngb-datepicker>
</ng-template>
and the ts
closeCalendar(event, dp) {
console.log(dp)
const path = event.path.map(p => p.localName);
if ((!path.includes('ngb-datepicker') && !path.includes('ng-
container') && !path.includes('gns-sentient-dates') &&
!path.includes('howser-input'))) {
dp.close();
this.onInputBlur();
}
}
Any ideas as to what I am missing?

Answer 1

Closing ngb-datepicker with clicking outside is an open issue of ng-bootstrap since 2016. Have a look at this issue.
Possible workarounds:
A)
use view:
(click)="d.toggle(); $event.stopPropagation();" (document:click)="d.close()"
or B)
use component:
if(!this._eref.nativeElement.querySelector('ngb-datepicker').contains(event.target)
&& !this._eref.nativeElement.querySelector('.input-group-addon').contains(event.target)) {
let self = this;
setTimeout(function(){
self.dynamicId.close();
},10);
}
or C)
use view:
<input style="background-color: white;" class="form-control" placeholder="YYYY-MM-DD" name="date" [(ngModel)]="date" ngbDatepicker #eToggle="ngbDatepicker" (click)="eToggle.toggle(); sToggle.close();$event.stopPropagation()" (document:click)="decideClosure($event, eToggle)" readonly>
and component:
decideClosure(event, datepicker) { const path = event.path.map(p => p.localName); if (!path.includes('ngb-datepicker')) { datepicker.close(); } }