Don't know how to set options in ngx-select-dropdown Angular 8

Question

I would like to get a dropdown list in my component.

In my HTML i have

<ngx-select-dropdown [options]="list"></ngx-select-dropdown>

And in TypeScript file:

this.list = [
      {id:1,display:'job'},
      {id:2,display:'task'},
            ];
  }

How do i set my options list in .ts? Is it correct to use "options"?

I don't see a problem with your options array. It looks like in docs. — Andris, Jan 09 '20 at 13:52

score 2 · Answer 1 · answered Jan 09 '20 at 13:49

2

Yes. In official doc says :

options: Array - Array of string/objects that are to be the dropdown options.

You can read more here : https://github.com/manishjanky/ngx-select-dropdown#readme

answered Jan 09 '20 at 13:49

Anton Skybun

1,479
8
21

score 1 · Answer 2 · answered Jul 20 '20 at 14:39

en el ngOnInit

this.selectConfig = {
            //limitTo: this.cities.length,
            limitTo: 1000,
            displayKey: 'name',
            search: true, // true/false for the search functionlity defaults to false
            // tslint:disable-next-line:max-line-length
            height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
            placeholder: 'Seleccione Ciudad', // text to be displayed when no item is selected defaults to Select,
            noResultsFound: 'No se encontraron resultados!', // text to be displayed when no items are found while searching
            searchPlaceholder: 'Buscar', // label thats displayed in search input,
            // tslint:disable-next-line:max-line-length
            searchOnKey: 'name', // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
            clearOnSelection: false, // clears search criteria when an option is selected if set to true, default is false
        };

the `displayKey` in the config don't match with column in `this.list` — Illep, Feb 06 '21 at 09:04

score 0 · Answer 3 · answered Feb 06 '21 at 09:18

In the config you need to change the default values for displayKey and displayFn.

HTML

<ngx-select-dropdown  (change)="change($event)" [multiple]="true" [config]="config" [options]="list "></ngx-select-dropdown>

config in .ts

  config = {
    displayFn:(item: any) => { return item.display; } ,//to support flexible text displaying for each item
    displayKey:"display", //if objects array passed which key to be displayed defaults to description
    search:true ,//true/false for the search functionlity defaults to false,
    height: 'auto', //height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
    placeholder:'Select', // text to be displayed when no item is selected defaults to Select,
    customComparator: ()=>{}, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,
    limitTo:2, // number thats limits the no of options displayed in the UI (if zero, options will not be limited)
    moreText: 'more' ,// text to be displayed whenmore than one items are selected like Option 1 + 5 more
    noResultsFound: 'No results found!' ,// text to be displayed when no items are found while searching
    searchPlaceholder:'Search' ,// label thats displayed in search input,
    searchOnKey: 'name', // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
    clearOnSelection: false ,// clears search criteria when an option is selected if set to true, default is false
    inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)
  }

Don't know how to set options in ngx-select-dropdown Angular 8

3 Answers3