Angular TypeScript ng-multiselect-dropdown multiple properties in TextField

0 votes

I am using the ng-multiselect-dropdown package. I have successfully pulled my data into the dropdown, but I want to be able use multiple properties in the textField of the dropdown.

If I do

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFirst',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

I get this result:

dropdownWithFirstName


I want to do something like this (nameFirst and nameLast in text field:

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFirst' + ' ' + 'nameLast',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

When I do that, I get this:

dropdownWithBadResult

How can I go about combining the nameFirst and nameLast properties (with a space in between)? Do I need to add another property to my user object? Can I do that on the fly or do I need to edit my model?

Jun 13, 2022 in TypeSript by