2

I'm using cascading dropdown with ng2-select2 ajax and when I change first dropdown it should re render second dropdown option but the option not re render. the second dropdown will receive value by @Input() from first dropdown value and run ajax. it will re render if I use setTimeout. Is there anyway to do without setTimeout?

Second dropdown

@Input() value: string;

public ngOnChanges(): void {
    this.getConditionType(this.value);
}

public prepareUrl(value: string): void {
    this.url = myUrl + '/' + pathVariable;

    // setTimeout(() => { if I use timeout it will re render
        this.setSelectOption(this.url);
    // }, 1);
}

public setSelectOption(url: string): void {
    let ajaxOptions = {
        url: url,
        dataType: 'json',
        delay: 500,
        cache: false,
        data: (params: any) => {
            return {
                search: params.term,
                gotoPage: params.page
            };
        },
        processResults: (data: any, params: any) => {
            params.page = params.page || 1;
            return {
                results: $.map(data.objectValue.items, function (obj) {
                    return { id: obj.code, text: obj.desc };
                }),
                pagination: {
                    more: (params.page * 10) < data.objectValue.total_count
                }
            };
        },
    };
    this.options = {
        ajax: ajaxOptions,
    };
}

HTML

 <select2 [options]="options"></select2>
Mahalo Bankupu
  • 272
  • 3
  • 5
  • 19
  • Same for me, Any news for this issue ? – Fabien Feb 04 '19 at 17:05
  • I use @Input() with set method [link](https://stackoverflow.com/questions/36653678/angular2-input-to-a-property-with-get-set) in second select2 to call method init new options to make select2 detect new or change in [options] to rerender – Mahalo Bankupu Feb 06 '19 at 10:11

0 Answers0