Nb-Select not emitting change event

[itkachyshyn]

Nb-Select not emitting event when used with [ngModel]

I'm submitting a bug report

Issue description

Current behavior:
Nb-Select does not emit (selectChange) or (ngModelChange) event when using observables with ngModel.

<nb-select (selectedChange)="onChange($event)" (ngModelChange)="onChange($event)"
    [ngModel]="selectedLocationUnitGroupId$ | async">
    <nb-option *ngFor="let option of locationUnitGroups$ | async" [value]="option.id">
        {{ option.type }}
    </nb-option>
 </nb-select>

Expected behavior:
I want nb-select to emit (selectChange) or (ngModelChange) event every time user selects an option

Any ideas how to fix it?

[pdomala]

I am having the same issue. Nb-select does not work if the options are generated using ngFor and observables. Hardcoding nb-option tags works fine.

[mckuok]

Anyone have a solution?
After some investigation, I note that in the property options._results, the ones generated by ngFor does not have an observer under selectionChange. However I don't know how to fix it. Hope that helps.

[mushu8]

up plz :

<nb-select placeholder="Menu" (selectedChange)="onMenuItemSelected($event)">
    <nb-option-group *ngFor="let rootMenu of rootMenus" title="{{rootMenu.rootMenu.name}}">
        <nb-option *ngFor="let menu of rootMenu.menus" value="{{menu.id}}">{{menu.name}}</nb-option>
    </nb-option-group>
</nb-select>

data :

[
  {
    "rootMenu":{"id":0,"name":"A"},
    "menus": [
      {"id":3,"name":"B"},
      {"id":2,"name":"C"}
    ]
  }
]

[Tibing]

Hi guys, the issue will be resolved in the nearest future.

[mushu8]

Thanks @Tibing
How near please ? hours ? days ? weeks ?
I'm currently on a client project and start thinking of ng-select but it will break the ui … :(

[Tibing]

Hi @mushu8, hope I'll be done this week, and next release version will be published next week

[mushu8]

ok thanks 👍

[thomasreji]

am facing the same issue too. When is the plan to release?

[gaspardip]

any workaround for this in the meantime?

[mushu8]

I’ve integrated ng-select

[anupam42]

@pdomala Have u got any solutions for ur issue because i am facing the same issue

[AsmaGargouri]

We are facing the same problem. Is there any solution yet please ?

[nu5rim3]

any update?

[t33zy]

Anyone got this issue solved? Please help

[chadirahme]

still not working !!

[ruodeng]

my solution is that, I have a pickupAddress which type is string, but put it into a temp array, only contain one value, and loop this array can work.

         <div class="form-group" *ngFor="let bc of tempPickupAddress">
                  <nb-select   *ngIf="canEdit" fullWidth [(selected)]="bc" (selectedChange)="onUpdatePickupAddress($event)" >
                    <nb-option-group   *ngFor="let pick of pickupAddress">
                    <nb-option  [value]="pick._id"> {{pick.unit}} {{ pick.street }}</nb-option>
                    </nb-option-group>
                  </nb-select> 
            </div>

related component

... 
tempPickupAddress = [null];
...
// In the ajax
    this.tempPickupAddress = [data.bulkOrder.pickupAddress];
...
// Update on select change.
 onUpdatePickupAddress(event) {
    this.bulkOrder.pickupAddress = event;
  }

[bkstorm]

I have the same problem. This issue has not been solved.

[AngelCareaga]

Solved this...

HTML

<nb-select placeholder="Seleccionar Talla" [(selected)]="selectedItemTalla" filled status="warning">
          <nb-option *ngFor="let talla of tallas" (click)="cambiaTalla(talla.sigla)" [value]="talla.sigla">{{talla.sigla}} <span style="opacity: 0.4 !important;">&nbsp;({{talla.quantity}} Disp)</span></nb-option>
        </nb-select>

AND TS

cambiaTalla(talla){
    console.log(talla);
  }

The Key is in the (click), cheers!!!

[GreedyA1]

same issue with selectedChange. @AngelCareaga click doesn't work for me. it just simply doesn't trigger anything.

[codeztech-atique]

Same issue

[codeztech-atique]

Same issue @AngelCareaga does not work form me -
<nb-select class="optionsData" [(selected)]="this.statusData">
<nb-option *ngFor="let status of tagsAPIStatus" (change)="selectedChange(status)" [value]="this.statusData === status ? status : ''">
 {{status}}

selectedChange(e) {
console.log(e);
this.statusData = e;
}

Not working

[Nisha-Yadav-1]

Solved this...

HTML

<nb-select placeholder="Seleccionar Talla" [(selected)]="selectedItemTalla" filled status="warning">
          <nb-option *ngFor="let talla of tallas" (click)="cambiaTalla(talla.sigla)" [value]="talla.sigla">{{talla.sigla}} <span style="opacity: 0.4 !important;">&nbsp;({{talla.quantity}} Disp)</span></nb-option>
        </nb-select>

AND TS

cambiaTalla(talla){
    console.log(talla);
  }

The Key is in the (click), cheers!!!

This would create too many event listeners. This could create a performance issue if used on multiple select box on single page and if each select box contains lots of options.

[aritrabasu104]

@AngelCareaga @Nisha-Yadav-1
We can use selectedChange event like this
<nb-select (selectedChange)="doWhatEverOnChange()" formControlName="transmissionType">

[JoseSpx]

Same issue, please fixed it. thanks

[JoseSpx]

Solved this.
(selectedChange)="selectedClientChange($event)"
Send the "$event", and the method will receive the value selected.

[westrindade]

Eu estou usando o translate...
Quando altero o idioma as opções de seleção são alteradas corretamente, mas se ja estiver selecionado uma opção, ele não altera ela, mas ao clicar no componente ele altera.
Podem me ajudar?

[amarnandeshwar786]

I am facing the following UI issue in nb-select, is anyone have a solution then please help to resolve this issue

[anupam42]

I am facing the following UI issue in nb-select, is anyone have a solution then please help to resolve this issue

@amarnandeshwar786 might with css class overlapping issue. Check some margin top added.

[nikita-fuchs]

None of the proposed solutions here work. The only thing you can do is have it directly put into the corresponding form control under its formcontrol name, and then listen to its changes.

like:

<form [formGroup]="tarifSchemaDataForm"> .... and then further below...

 <nb-select *ngSwitchCase="'options'"  [selected]="" fullWidth="true" placeholder="{{field.label}}" formControlName="{{field.name}}" nbPopover="{{field.helpMessage}}" nbPopoverTrigger="noop" nbPopoverContext="{{field.name}}">
            <nb-option *ngFor="let option of field.options | keyvalue" value="{{ option.key }}" > <div class="numberCircle">{{option.key}}</div><span style="white-space:nowrap;"> &nbsp;&nbsp;{{option.value }}</span></nb-option>
          </nb-select>