Support the functionality to add dynamic options

[newdevsoft7]

I can't add not existed option, does this package support the dynamic option population?

[optimistex]

Just change the items property and it is must to be enough.

[newdevsoft7]

how can I change the items property?

[optimistex]

import {Component} from '@angular/core';

@Component({
    selector: 'single-demo',
    template: `<ngx-select [items]="items"></ngx-select>`
})
export class SingleDemoComponent {
    public items: string[] = [];
    private counter = 1;

    constructor() {
        setTimeout(() => {
            setInterval(() => {
                this.items.push('item ' + this.counter++);
            }, 2000);
        }, 2000);
    }
}

Just click on the select and watch:

After few secontds:

[newdevsoft7]

Nice. but when I can't find the option, how can I hook this?

[optimistex]

Are you talking about a something event firing on a search text is typed and the rendered item list is empty?

[newdevsoft7]

Yep

[optimistex]

I think that I can add the event (filtered) with returning items for rendering.
But! It will be items of:

interface INgxSelectOption {
    value: number | string;
    text: string;
    disabled: boolean;
}

[newdevsoft7]

Thank you very much. I should use this plugin. Excuse me, but can you make a plunkr for this?

[newdevsoft7]

By the way, when I use this plugin with Angular Material, how should I do for?

[optimistex]

Yes. Sure. Make a plankr. It will help me to understand your case.

[optimistex]

By the way, when I use this plugin with Angular Material, how should I do for?

Currently, I have no experience with Angular Material and I am not sure about it is working correctly.
But, If you are want to collaborate. Then I think that we can ensure support for the angular material.
If it is interesting for you then text me to the Telegram: @optimistex

[newdevsoft7]

@optimistex I am sorry, but I am not familiar with Angular Material, and I am in a busy condition with my client's work. so I am afraid that I can't help you now.

[optimistex]

Okay. Do not worry.
Return to the topic.
Show your case. And I will try to think up an optimal solution with the ngx-select-ex.

[newdevsoft7]

I would like to use children-based select with a dynamic option population.
e.g. if I can't find an option when I type, I should fetch data from backend with the entered text. And then I should populate the entered text as an item and the fetched data as other items.
That's my story. you should use children demo.

[optimistex]

I have the similar case in my the general project.
Your described case has a trouble.

Look at the trouble:

• on the backend exists 1000 record of data.
• I suppose that you are loading just a part of records, 100 for example.
• suppose you are written some text, ho for example.
• the select was filtered and found 3 records.
  But! We forget about the rest 900 records on the backend. It was not filtered... However, on the backend may be multiple records satisfying the search text ho. And by your logic, a user will not see the records from the backend.

Solution!

We have to send a search request for all typed text, but with debounce(!).

For clarity look at the real code from my project:

<ngx-select class="ls-select" id="position-name" [formControl]="searchPosControl"
            [items]="subjSearchPosItems | async" optionValueField="uuid" optionTextField="name"
            (typed)="searchPosTyped.next($event)"
            placeholder="Поиск позиции"
            [allowClear]="true">
</ngx-select>

export class PageOrderEditComponent {
   // ...........
    public searchPosTyped = new Subject<string>();
    public searchPosControl = new FormControl();
    public subjSearchPosItems: Observable<INomenclaturePosition[]>;
   // ...........
    private initBehaviorsOfAddPosition() {  // called from the constructor
        // for live search in searchPosControl
        this.subjSearchPosItems = this.searchPosTyped
            .debounceTime(500)
            .flatMap((text: string) => this.catalog.getNomenclaturePositionList({search: text}))
            .flatMap((itemList: ICrudList<INomenclaturePosition>) => Observable.from(itemList.items)
                .map((item: INomenclaturePosition) => Object.assign({name: item.values.f_name}, item))
                .toArray()
            )
            .share(); 
      // .............
   }
}

[newdevsoft7]

Awesome!

[newdevsoft7]

Thank you very much!

[TFeld00]

@optimistex Using the solution from your comment only loads 100 results, would it be possible to load more when scrolling to the bottom of the dropdown (as in select2)?
Eg. an event could be fired that loads more results.

[optimistex]

@TFeld00 I think it's possible. I can make an event with parameters item, index, items.
Then you will can subscribe to the event and decide when send a request for downloading more records.

What do you think about the idea?

[TFeld00]

@optimistex Sounds good :)

[optimistex]

@TFeld00 Well. I'll implement it a little later.

[TFeld00]

@optimistex No problem, I'll see if i can work around it atm

[optimistex]

It's done: https://github.com/optimistex/ngx-select-ex/releases/tag/3.3.11
Check the documentation: https://github.com/optimistex/ngx-select-ex#api

(navigated)	Fired on navigate by the dropdown list. Returns: INgxOptionNavigated.