How to implement ngx-select-dropdown with typescript objects array not with single type of elements such strings

Question

I wanted to implement mat select box or just html select box with live search functionality and found mat-select-search project implemented in https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html. It is working perfectly fine but it requires a lot of configuration and in my project I have more than 5 mat-selects with pretty large data set, then found "ngx-select-dropdown" it has minimum configuration but I couldn't configure it for typscript objects, it is working with single type string array. Here is code

export class AppComponent { 
  public items: string[] = ['Amsterdam', 'Antwerp', 'Athens','Barcelona',
  'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
  'Zagreb', 'Zaragoza', 'Łódź'];

  public ngxControl = new FormControl(); 

  public inputTyped = (source: string, text: string) => 
  console.log('SingleDemoComponent.inputTyped', source, text);}

html

        <ngx-select [formControl]="ngxControl"
                [allowClear]="true"
                [defaultValue]="doNgxDefault()"
                [items]="items"
                placeholder="No city selected"
                (typed)="inputTyped('ngx-select', $event)"
        </ngx-select>

However I wanted to implement it with this type of items

interface Bank {
  bank_id: number;
  name: string;
  code: string;
  ord: number;}
 private items: Bank[] = [
   {bank_id: 1, name: 'Bank A (Switzerland)', code: 'ARM', ord:10},
   {bank_id: 2, name: 'Bank B (Switzerland)', code: 'ARM', ord:11},
   {bank_id: 3, name: 'Bank C (Switzerland)', code: 'HIO', ord:12},
   {bank_id: 4, name: 'Bank D (Switzerland)', code: 'ARM', ord:13},
   {bank_id: 5, name: 'Bank E (Switzerland)', code: 'ARM', ord:14},];

Is it possible use typscript objects with ngx-select for items, because I need to populate the names of each object and get the id's as value property to integrate with database. I am sure that it is possible extracting the names with loop and searching matching options with names but it is not best practice I think.

Updated Answer Since items:[] gets array of objects property names of items should be exactly as documentation of ngx-select

    interface Bank {
        id: string;
        text: string;
     }

Sameer · Accepted Answer · 2019-06-10 08:24:30Z

2

Yes its possible. you need see API document https://optimistex.github.io/ngx-select-ex/

optionValueField string 'id' Provide an opportunity to change the name an id property of objects in the items optionTextField string 'text' Provide an opportunity to change the name a text property of objects in the items

<ngx-select [formControl]="ngxControl"
                [allowClear]="true"
                [defaultValue]="doNgxDefault()"
                [items]="items"
                [optionValueField]="bank_id"
                [optionTextField]="name"
                placeholder="No city selected"
                (typed)="inputTyped('ngx-select', $event)"
        </ngx-select>

answered Jun 10, 2019 at 8:24

Sameer

5194 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahimjon Rustamov Over a year ago

Thanks @Sameer but it is working in the same way. [optionValueField]="bank_id" [optionTextField]="name" both not working at the same time, if I use first it displaying id's and giving value id's and second is vise versa. I need text displayed and value will be id. Can you help with this?

Sameer Over a year ago

It should work see this working example. stackblitz.com/edit/ngx-select-ex-example-formcontrol

Giulio Caccin · Accepted Answer · 2019-07-24 14:11:24Z

1

 <ngx-select  
            [(ngModel)]="Value Which You Selected"
            [allowClear]="true" 
            [items]="Bank" 
            optionTextField="bank_id" 
            placeholder="Type your Value Here"> 

    <ng-template ngx-select-option ngx-select-option-selected let-option let-text="text">
    <span class="color-box" [style]="option.value"></span>
    <span [innerHtml]="text" style="color: black"></span>
    / {{option.data.name}}  / {{option.data.code}}  / {{option.data.ord}}
    </ng-template>   

</ngx-select>

Assign your Full array in [Items]="" and use the another key values in ngx Template

{{option.data.name}}
{{option.data.code}}
{{option.data.ord}}

edited Jul 24, 2019 at 14:11

Giulio Caccin

3,0686 gold badges38 silver badges59 bronze badges

answered Jul 24, 2019 at 13:45

Iliyas Shaik

1145 bronze badges

Comments

Esteban Gehring · Accepted Answer · 2019-06-12 05:26:57Z

0

If you want to stay with angular material, you can also create your custom wrapper component to avoid boilerplate code, see e.g. Angular ngx-mat-select-search Custom Component. The wrapper component behaves like a form control and you can adjust it to your needs.

answered Jun 12, 2019 at 5:26

Esteban Gehring

8418 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to implement ngx-select-dropdown with typescript objects array not with single type of elements such strings

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related