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 
                                  [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.

CodePudding user response：

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
  
  [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

CodePudding user response：

in your license-add.component.html your are giving only [itemDisabled]="itemDisabled"

maybe try to use [itemDisabled]="itemDisabled()" with your itemArgs-Object?

I think the problem is, that you dont use your itemArgs in html