markDisabled does not support instance method

I’m not sure that is a bug or not, but try to access to this in the markDisabled callback failed:

  isWeekend(date: NgbDateStruct) {
    const d = new Date(date.year, date.month - 1, date.day);
    return d.getDay() === 0 || d.getDay() === 6;
  }

  isDisabled(date: NgbDateStruct, current: {month: number}) {
    const d = new Date(date.year, date.month - 1, date.day);
    return this.isWeekend(date); // this is undefined
  }

Bug description:

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/sPAZc5vKszJZ0PsRQqIO?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.0.3

ng-bootstrap: 1.0.0-alpha.26

Bootstrap:4.0.0-alpha.6

Thanks in advance.

[wesleycho]

I’m not sure anything can be done about this on the library side - if I remember right, this is sort of related to Angular itself and how it works with binding functions.

Your best bet would be to work around this by defining a function like

isDisabled = (date: NgbDateStruct, current: {month: number}) => {
    const d = new Date(date.year, date.month - 1, date.day);
    return this.isWeekend(date); // this is undefined
}

The benefit of this is that it preserves the context of this regardless of how Angular handles bound functions.

[ghost]

in template:

[markDisabled]=“isDisabled(allowedDays)”

in component

isDisabled(dates: NgbDateStruct[]) {
    return (pickerDate: NgbDateStruct, currentMonth) => {
        return !dates.find(dayAllowed => dayAllowed.year == pickerDate.year && dayAllowed.month == pickerDate.month && dayAllowed.day == pickerDate.day);
    }
}