Insert new items through filter

[VictorJuliani]

Is it currently possible to insert new select options through filter instead of simply showing 'No results found' message?

[Biptor]

Hi, you can do it this, just use the "noOptionsFound" event to create the new option on the list, and later use the JavaScript function Concat to "reload" your list of options. This worked fine for me. Pdta. if you don't know, the JavaScript function Push not always reload the list of options on this component, so you need to use Concat to create a new array to bind

[mazlanmohdnor]

Hi @Biptor , can u show me how to do it? i have a problem here, im making a dynamic dropdown list, 1 state can have many district, im binding the [options] with dynamic data, when i select state option, it should populate 2nd dropdown, but its not., the data for district is there, but the 2nd list is not updating.

[Biptor]

Hi @mazlanmohdnor

For example you have this on the template ... <ng-select #state [options]="charactersState" (selected)="onSelected($event)"> ... <ng-select #district [options]="charactersDistrict"> ...

And this on the class:

export class LoadOptionsExample implements OnInit {

charactersState: Array<IOption>;
charactersDistrict: Array<IOption>;
selectedCharacter: string = '3';

constructor(
    private optionService: OptionService
) {}

ngOnInit() {
    this.optionService.loadOptionsState().subscribe((options) => {
        this.charactersState= options;
    });
}

onSelected(option: IOption) {
    this.optionService.loadOptionsDistrict(option).subscribe((districts) => {
        //Because you don't need to conserv the last values, you may have to use a clone.
        //If you don't make a clone. The scope from the charactersDistrict dosen't change
        //and the values on the ngSelect not will be refresh
        this.charactersDistrict = districts.slice(0);
    });
    
}

}

Remember this is an example, I write this one without run on any IDE, and without test on any browser. But I hope that you catch the idea and I hope this help you.

(y)

[mazlanmohdnor]

Thank you sooo muchh @Biptor , it work like a charm man. it working with slice(). before this i just push the value to the districtArray.

this is my working snippet

this.searchService.searchPostJSON(searchDistrictParameter)
            .map((data) => data.json())
            .subscribe((data) => {
                this.districtArr = []; //<-empty the array for new district 
                data.results.forEach(element => {
                    this.districtArr.push({
                        label: element.districtName,
                        value: element['hex(districtId)']
                    });
                    this.districtArr2 =  this.districtArr.slice(0) //<-adding this make the job done
                });
                console.table(this.districtArr);
            });

Tq man. but just curious, why we need to use slice()?

[Biptor]

Hi @mazlanmohdnor

I'm glad to know that.

About your question, Slice(0) is an easy way to clone an array.

Advice: put this line "this.districtArr2 = this.districtArr.slice(0) //<-adding this make the job done" out of the forEarch cycle.

(y)

[saschwarz]

@mazlanmohdnor it works with the slice(0) because Angular change detection doesn't look inside objects (an Array in this case) to detect they changed. Angular looks to see if the object itself has changed. So that's why you need to replace the whole array. In your example I think you can use map and you'll get a new Array instead of needing to use slice():

this.searchService.searchPostJSON(searchDistrictParameter)
            .map((data) => data.json())
            .subscribe((data) => {
                this.districtArr2 = 
                data.results.map(element => {
                   return {
                        label: element.districtName,
                        value: element['hex(districtId)']
                    };
                });
                console.table(this.districtArr2);
            });