Angular TypeScript ng-multiselect-dropdown multiple properties in TextField

Question

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:

---

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:

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?

Answer 1

I was able to work around this issue by adding a NameFull calculated property to my UserForDetailedDto on the backend, accounting for the additional propety in my front-end model, and then using that for the text-field value.

Models\UserForDetailedDto.cs

public class UserForDetailedDto
{
    public int Id { get; set; }

    public string Username { get; set; }

    public string NameFirst { get; set; }

    public string NameLast { get; set; }

    public string NameFull => NameFirst + " " + NameLast;

    ...
}

ClientApp\src\app_models\User.ts

export interface User {
  id?: number;
  username?: string;
  nameFirst?: string;
  nameLast?: string;
  nameFull?: string;
}

The dropdown settings

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

To know more about Angular, It's recommended to join Angular JS Course today.