[Solved] Angular Kendo autocomplete Toggle not working

[Acshaya]

I have a Angular form which contains two autocomplete fields. Both share same reference and call same function. autocomplete.toggle(false) is working for first field but not for the second one.

[Hetali]

Hello Acshaya,

Thank you for reaching out.

Yes, you can use same reference in different elements, but when you fetch it you will only get the first reference. In order to fetch all the references, use the ViewChildren decorator as seen below:

<button kendoButton (click)="toggle()">Toggle!</button>

<kendo-autocomplete #autocomplete [data]="areaList"> 
</kendo-autocomplete> ;

<kendo-autocomplete #autocomplete [data]="areaList"> 
</kendo-autocomplete>

@ViewChildren('autocomplete') public autocomplete;

public toggle() {
  this.autocomplete._results.forEach((dropdown) => {
    dropdown.toggle();
  });
}

In this StackBlitz example, the toggle method is applied to both the Kendo UI AutoComplete components with the same template reference variable.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik