How can I get public variable value inside @input decorator of type function?

I have a dropdown component which has @Input decoration having function with arguments and it returns boolean value

dropdown-abstract.component.ts

    @Input() public itemDisabled: (itemArgs: { dataItem: any; index: number }) => boolean = () => false;

license-add.component.html

        <hf-shared-dropdown-small class="license-card__row-input"
                                  [id]="'expiryDate'"
                                  [required]="false"
                                  [itemDisabled]="itemDisabled"
                                  [isConfirmable]="false"
                                  [data]="expiryDates"
                                  [value]="selectedExpiryDate"
                                  (valueChange)="dateSelect($event)">
        </hf-shared-dropdown-small>

license-add.component.ts

    public getCustomer(): void {
        this.loading = true;
        this.customerService.getCustomer(this.customerId)
            .pipe(first(), finalize(() => this.loading = false))
            .subscribe((response: CustomerResponse) => {
                if (response && response.success) {
                   
                    this.customerName = response.name;
                    this.registeredTo = response.tradingName ?? response.name;
                    this.locationCount = response.licensedLocCount;
                    this.employeeCount = response.licensedEmpCount;
                    //here we set the contract end date to use
                    this.contractEndDate = response.contractEndDate;
                
                    sessionStorage.setItem("contractEndDate",this.contractEndDate.toString());
                    if (response.contractEndDate && response.contractEndDate > 0) {
                        this.selectedExpiryDate = this.expiryDates[3];
                        this.dateSelect(this.selectedExpiryDate);
                    }
                } else {
                    this.modalService.showInfoPopup({ title: 'Ooops!', text: 'Customer missing.', showIcon: true, popupType: PopupTypes.Error });
                }
            },
                (error: any) => {
                    this.modalService.showInfoPopup({ title: 'Ooops!', text: error, showIcon: true, popupType: PopupTypes.Error });
                });
    }

then @Input function in this component

      public itemDisabled(itemArgs: { dataItem: IdNameValue; index: number; date: number})  {

        console.log(this.contractEndDate)
   
        if ((this.contractEndDate)) {
            if (itemArgs.dataItem.id === LicensePeriod.ContractEndDate) {
                return true;
            }
        }
        return false;
    }

Now when I access the itemDisabled function, this.contractEndDate gives undefined although the value was set earlier.

Solution

That is happening in your case because the itemDisabled is being called from another context (and another this).

To resolve it you need to:

Either change the function to an arrow function instead of a normal function:

public itemDisabled = (itemArgs: {
  dataItem: IdNameValue;
  index: number;
  date: number;
}) => {
  console.log(this.contractEndDate);

  if (this.contractEndDate) {
    if (itemArgs.dataItem.id === LicensePeriod.ContractEndDate) {
      return true;
    }
  }
  return false;
};

Or bind your function to this related to your component:

<hf-shared-dropdown-small
  class="license-card__row-input"
  [id]="'expiryDate'"
  [required]="false"
  [itemDisabled]="itemDisabled.bind(this)"
  [isConfirmable]="false"
  [data]="expiryDates"
  [value]="selectedExpiryDate"
  (valueChange)="dateSelect($event)"
>
</hf-shared-dropdown-small>

You can read more here about the differences between the arrow function and the normal one: https://stackoverflow.com/a/34361380/15159603