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 Logan
• 2,140 points
3,757 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
};

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

answered Jun 13, 2022 by Nina
• 3,060 points

Related Questions In TypeSript

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, 2022 in TypeSript by Nina
• 3,060 points
3,311 views
0 votes
0 answers

What is a type in Typescript for the Component class in Angular 2+?

I have a small problem, but big ...READ MORE

Jul 5, 2022 in TypeSript by Logan
• 2,140 points
752 views
0 votes
1 answer
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,150 points
1,579 views
0 votes
1 answer
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, 2022 in Others by Rahul
• 9,680 points
21,359 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, 2022 in Others by narikkadan
• 63,600 points
2,222 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, 2022 in TypeSript by Nina
• 3,060 points
1,680 views
0 votes
1 answer

Angular ForEach in Typescript?

Try this: selectChildren(data, $event) { ...READ MORE

answered Jun 7, 2022 in TypeSript by Nina
• 3,060 points
1,321 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP