Nebular: 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 -


 {{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.