ngx-select-dropdown set displayKey with multiple values

Question

I am using ngx-select-dropdown with search feature and I want to set multiple displayKey values like: firstname and lastname.

Below is my config object:

dropdownconfig = {
    displayKey: 'firstName, lastName',
    search: true,
    placeholder: 'Select User',
    height: '150px'
};

html:

<ngx-select-dropdown (change)="selecteAdmin($event)" [config]="dropdownconfig" [options]="allUserData" [(ngModel)]="singleSelect" [multiple]="false" ></ngx-select-dropdown>

How to display multiple values for displayKey? Also, need validation on that drop-down.

I have a doubt, what do you mean by multiple values for `displayKey`? `displayKey` is used if your data is of complex type. So if your `allUserData` is `allUserData = [ { firstName: 'val1'} ]`, then in dropdown you will see `val1`. Can you please elaborate more. — Plochie, Dec 10 '19 at 05:31

score 2 · Accepted Answer · answered Dec 10 '19 at 05:43

Create custom field in your array object. And use it as key.

dropdownconfig = {
    displayKey: "custom",
    search: true,
    placeholder: "Select User",
    height: "150px"
  };


  allUserData = [
    { firstName: 'first1', lastName: 'last1'}, 
    { firstName: 'first2', lastName: 'last2'},
    { firstName: 'first3', lastName: 'last3'},
    { firstName: 'first4', lastName: 'last4'}
  ]

  ngOnInit() {
    for (let user of this.allUserData) {
      user['custom'] = user.firstName + ' ' + user.lastName;
    }
  }

Working Stackblitz

Shabbir Dhangot · Answer 2 · 2019-12-10T05:43:09.957

1

Same question is open on the library. You can't do that. Read it here. I have copied workaround below.

You can do with your custom property of array/ object. For example :

Let say you have Person (id, firastName, lastName, age) array/ object.
Create new custom property as : name of Person object and set values as : firstName + lastName
Use Person ( (id, firastName, lastName, name, age) array/object and dispayKey as : name

Achieve merging by adding new key. You can loop through array/object. For ex.

users.forEach((user) => {
    user.name = user.firstName + user.lastName;
});

edited Dec 10 '19 at 05:43

answered Dec 10 '19 at 05:38

Shabbir Dhangot

8,954
10
58
80

Can you pls give me example with custom object? – Pathik Vejani Dec 10 '19 at 05:39
I am not getting how to do that, it'll be helpful if you give example code. – Pathik Vejani Dec 10 '19 at 05:41

ngx-select-dropdown set displayKey with multiple values

2 Answers2