I wanted to implement mat select box or just html select box with live search functionality and found mat-select-search project implemented in ponent.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;
     }

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./github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.ponent.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;
     }

• javascript
• angular
• typescript
• select

Share Improve this question Follow edited Jun 10, 2019 at 13:35 Rahimjon Rustamov asked Jun 10, 2019 at 8:14 Rahimjon RustamovRahimjon Rustamov 25611 gold badge33 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

 <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}}

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