Angular Mat Calendar Disable date based on Rest result

Question

I am using Angular material calendar (i.e) mat-calendar. I am trying to disable some of the dates in the calendar based on dynamics value.

HTML

    <mat-calendar [headerComponent]="exampleHeader" [dateFilter]="filterDates"></mat-calendar>

I am using a custom header, to catch next/previous month events and then call some rest api, and based on the result of this call, I want to disable some dates. Calls of this.nextClicked() and this.previousClicked(); are generated only after the rest api gave response.

I am using the dateFilter attribute, but all my variables are undefined

TS

  public filterDates(date: Date): boolean {
    if (this.apiResult !== undefined) {
      let d = this.pipe.transform(date, 'yyyy-MM-dd');
      return this.apiResult.has(d);
    } else {
      return true;
    }
 }

If you have any idea or any methods to change disabled dates programmatically Thanks

Answer 1

To take the context into your filterDates method you need to use arrow functions instead of declaring it as a regular method as you did (otherwise the this keyword will be referring to the context inside matDateFilter class, where your pipe and apiResult don't exist) :

filterDates = (date: Date): boolean => {
  if (this.apiResult !== undefined) {
    let d = this.pipe.transform(date, 'yyyy-MM-dd');
    return this.apiResult.has(d);
  } else {
    return true;
  }
}

Stackblitz demo