If 'items' contains no data, option-not-found template not showing

[ghost]

If you provide empty data set, option-not-found template not showing.

<ngx-select
    [items]="[]"
>

    <ng-template ngx-select-option-not-found>
         My super template not showing, if there are no items =(
     </ng-template>

</ngx-select>

This has its own logic, but It will be really nice to have some additional template in case we want to show something about an empty data set.

P.S. Thanks for the library!

[optimistex]

@PStrelchenko It's a feature )) I did it to avoid confusing with lazy load data. The use case:

• Set a variable value as []
• Load some data
• Set loaded data to the variable

[optimistex]

@PStrelchenko For your case... You can disable or hide the select for the empty data.

[ghost]

@optimistex , thanks, but we want to have a single component for selecting and adding new items, so disabling or hiding is not fit our goal. We can't load some data, because in our case we can have no data at all, and current component should be used for adding new data.

[optimistex]

Hmm. Okay. The other way. If you need add items then you able to change the text of the not found message through a template. For example you can add some html with a link or a button for adding an item to the list.

[ghost]

@optimistex, nope, it does not work such way =) "Not found message" template will be shown only if there is at least one item in items (you told about "ng-template ngx-select-option-not-found", am I right?). But we don't have any items in our case =) So, I've created this issue only for fixing this =)

If we'll change this

<ul #choiceMenu role="menu" *ngIf="isFocused" class="ngx-select__choices dropdown-menu" [class.show]="(optionsOpened && subjOptions.value.length)">

in ngx-select.component.html into

<ul #choiceMenu role="menu" *ngIf="isFocused" class="ngx-select__choices dropdown-menu" [class.show]="(optionsOpened && subjOptions.value.length) || (!items || items.length == 0)">

"no results found" template will be shown even if there is no data.

[optimistex]

@PStrelchenko It fixed in the development branch. Install by npm i ngx-select-ex@dev

Please, give me a feedback.

[ghost]

@optimistex, yeap, issue is fixed with your changes. Thanks!

[optimistex]

@PStrelchenko Nice. Use it. I'll include it into a next release.

[abeninskibede]

This is not working for me with the current version 3.7.0

[optimistex]

@abeninskibede v3.7.0 on Angular8. So, could you try it on Angular 8? Or, say what version of Angular do you use?

[abeninskibede]

Hey @optimistex my app is running angular 6.0.0. Does this really matter?

[optimistex]

@PStrelchenko The general change in 3.7.0 is Upgrade up to Angular 8: https://github.com/optimistex/ngx-select-ex/releases/tag/3.7.0

So, apparently it is matter. I'll try to check it on Angular 6.

[optimistex]

@PStrelchenko I've tested there: https://stackblitz.com/edit/ngx-select-ex-issues-80?file=app/app.component.ts

Yes, seems it is a bug. When the component has no any items the "not found" menu does not appear.

I'll try to find a time to fix it.

[abeninskibede]

Great! Thanks for the support mate

[optimistex]

@abeninskibede Fixed: https://github.com/optimistex/ngx-select-ex/releases/tag/3.7.2 Use showOptionNotFoundForEmptyItems option!

[optimistex]

Related task (option 3): https://github.com/optimistex/ngx-select-ex/issues/138#issue-396844555