ngbootstrap datepicker Range Selection - .isRange not defined TYPO

[robeverett]

import { NgbCalendar, NgbDate } from 'node_modules/@ng-bootstrap/ng-bootstrap';

package.json:

"@ng-bootstrap/ng-bootstrap": "^3.0.0",
"bootstrap": "^4.1.3",

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}

in the component:
isRange(date: NgbDate) {
return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
}
debug console:
cannot read property 'equals' of undefined - .isRange.

[robeverett]

Update:
I found where the problem was:
it was in the span inside the ng-template:

{{ date.day }}

but, it is surely {{ let-date.day }} ??

[robeverett]

Example of the range selection

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">

<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}

---

From: {{ fromDate | json }} 

To: {{ toDate | json }} 

PLEASE save others hours/days of wasted development time by fixing typos.

[robeverett]

Further update:

this will only compile without debug console errors IF the square brackets are removed from all the class names in the span element:

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
class.focused="focused"
class.range="isRange(date)"
class.faded="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date | json }}

There is still an issue with the layout and what should really go in the {{ }} in the span!
But bewarned, this link:
https://ng-bootstrap.github.io/#/components/datepicker/examples

has wasted me over a day of development time in Angular Six.

[Gerrit0]

I am... a bit confused. It looks to me like this issue really isn't related to TypeDoc. Did you mean to open an issue over at the ng-bootstrap repo? https://github.com/ng-bootstrap/ng-bootstrap