We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Filter input breaks when data loaded dynamically from remote source

I need to use a http service to fetch and filter data from the server for DropdownTree component.

The problems are,

Problem 1:

When I open dropdown before data loaded (simulating an API call with some delay), then filter input breaks as shown above.

But if I open dropdown after data loaded (just wait till the http complete), filter input appears correctly.

Problem 2:

Once search input is provided, the search event triggers and fetch data from API. But component data does not update.

selector: "app-celldropdown",
template: `
styleUrls: ["./celldropdown.component.scss"],
export class MyDropDownListComponent implements OnInit {

constructor(private dataService: DataService) {}

public filterData!: object[];
public placeholderText = 'Select..';
public filterBarPlaceholderText = 'Search..';

fields = {
dataSource: this.filterData,
value: "id",
text: "name",
parentValue: "pid",
hasChildren: "hasChild",

ngOnInit() {
this.dataService.search("").subscribe((response) => {
this.fields = { ...this.fields, dataSource: response };

onFiltering(e: any) {

getData(text: string) {
this.dataService.search(text).subscribe((response) => {
this.filterData = response;

The 'dataService' i'm using is the service which execute API calls:

export class DataService {
constructor(private http: HttpClient) {

search(text: string): Observable<object[]> {
return this.http.get<object[]>(`${API_ROOT}/myEndpoint?search=${text}`);

3 Replies 1 reply marked as answer

LD LeoLavanya Dhanaraj Syncfusion Team March 20, 2023 12:57 PM UTC

Hi Aruna,

Greetings from Syncfusion support.

We have validated your reported issue in the Angular Dropdown Tree component. By default, you need to properly refresh the component in order to see the dynamic changes in the UI. The reported issue also occurs due to the Dropdown Tree component not being properly refreshed while dynamically updating the datasource. To overcome the reported issue, you need to call the refresh method after the data source is changed.

For your reference, we have attached the Dropdown Tree sample with the latest version. Check out the below code snippets for further assistance.

Sample : https://stackblitz.com/edit/angular-xutdhd?file=src%2Fapp.component.ts,src%2Fapp.component.html


<button (click)="onClick($event)">update datasource</button>



onClick() {

    this.ddTree.fields = {

        dataSource: this.filterData1,

        value: 'id',

        parentValue: 'pid',

        text: 'name',

        hasChildren: 'hasChild',




Follow our suggested way at your end. If the issue still persists, replicate the issue in our shared sample or provide the issue replicated sample. These details will help us to check and provide a prompt solution.


Leo Lavanya Dhanaraj

AR Aruna replied to LeoLavanya Dhanaraj March 20, 2023 04:00 PM UTC

Hi Leo,

I was able to reproduce the issue in your sample, and I was also able to apply the provided solution successfully.


Further more, I had to use showPopup method to achieve my desired behavior as the dropdown collapses automatically when use refresh method.

Looking forward to know any better approach, if there is one.

Thank you.


onClick() {
    setTimeout(() => {
      this.ddTree.fields = {
        dataSource: this.filterData1,
        value: 'id',
        parentValue: 'pid',
        text: 'name',
        hasChildren: 'hasChild',
    }, 1000);

LD LeoLavanya Dhanaraj Syncfusion Team March 21, 2023 04:38 PM UTC

Aruna, The Dropdown Tree component's popup is closed when you refresh or update the values in the component. This is the default behavior of our component. Therefore, if you want to show the dropdown popup, you need to manually call the showPopup method for popup opening.

Additionally, you need to refresh the component after dynamically updating the values in the Dropdown Tree component, and this is the proper way to do it.

Sample : https://stackblitz.com/edit/angular-xutdhd-7ppycz?file=src%2Fapp.component.ts

onClick(e) {

  setTimeout(() => {

    (this.ddTree as any).fields = {

      dataSource: this.filterData1,

      value: 'id',

      parentValue: 'pid',

      text: 'name',

      hasChildren: 'hasChild',




  }, 1000);


Check the shared details and sample at your end. Please get back to us if you need any further assistance.

Marked as answer
Live Chat Icon For mobile
Up arrow icon