Custom array in data property

[tealpartners]

Custom array in data property

[icecoldfire]

Hey,

I have added an example for a custom array in the data property:

• Demo: https://tealpartners.github.io/ng-select2/
• Code: https://github.com/tealpartners/ng-select2/tree/master/src/app/demos/custom-array

More info over using select2 options: https://select2.org/configuration/options-api

[giordanni612]

@icecoldfire, is this commit (0dc87af) published at npm? I'm experimenting the same old issue: when no value is selected (initially), the control becomes very small vertically

[icecoldfire]

0dc87af is not published on NPM because I didn't change any code to the package. Only the demo component was added.

Could you please share your code so that I can take a look?

[giordanni612]

In html:

<ng-select2 name="PreferredLanguage" [(ngModel)]="appRequest.participant.preferredLanguage"[options]="options" [width]="'100%'" [data]="helpersService.languages" [placeholder]="'Select...'">
</ng-select2>

---

In ts:

options = {
	templateSelection: (object: any) => {
		return object && object.name;
	},
	templateResult: (object: any) => {
		return object && object.name;
	}
};

---

'appRequest.participant.preferredLanguage' has type 'IdNamePair' and 'helpersService.languages' has type 'IdNamePair[ ]'
export class IdNamePair { constructor(public id: number, public name: string) { } }

[giordanni612]

@icecoldfire , also, with this approach search functionality is broken. It always filter 'No results found'

[icecoldfire]

ngModel doesn't accept an object but the id of that object.

In the code you will see that:

@Input() value: string | string[];

the input value is from type string or a array of strings.

I think this is the correct html:

<ng-select2 name="PreferredLanguage"
	[(ngModel)]="appRequest.participant.preferredLanguage.id" 		
	[options]="options" 
	[width]="'100%'" 
	[data]="helpersService.languages" 
	[placeholder]="'Select...'">
</ng-select2>

[giordanni612]

@icecoldfire I tried this way, but the issue with filtering remains

[icecoldfire]

@giordanni612 What happens when you use the demo example?

[icecoldfire]

Closed because there was no feedback of the reporter.

[giordanni612]

Sorry for the delay. I haven't had time to test your example. Finally, I'm currently using it in this way:
<ng-select2 [ngModel]="address.country?.id" [width]="'100%'"
[data]="helpersService.displayCountries()" [placeholder]="'Select...'"
(valueChanged)="address.country=helpersService.countries[$event.data[0].element.index]">