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 in TypeSript by Logan
• 1,580 points
16 views

1 answer to this question.

0 votes

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
};
answered Jun 13 by Nina
• 2,900 points

Related Questions In TypeSript

0 votes
0 answers

Angular ForEach in Typescript?

I see many answers about using ngFor ...READ MORE

Jun 3 in TypeSript by Logan
• 1,580 points
18 views
0 votes
1 answer
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
17 views
0 votes
1 answer

What is TypeScript and why would I use it in place of JavaScript?

TypeScript is a superset of JavaScript which primarily ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
8 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
476 views
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10 in Others by Rahul
• 8,980 points
466 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 10,840 points
530 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1 in TypeSript by Nina
• 2,900 points
17 views
0 votes
1 answer

Customise Ngx-toastr in angular 6 with TypeScript

After Override this CSS in your Style.css File. I ...READ MORE

answered Jun 9 in TypeSript by Nina
• 2,900 points
8 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP