select - How to update a single var in angular after change

Question

I have a stepper with the following select on step n.1:

<nb-select selected="INFO" (selectedChange)="changeStepperIDDevice($event)" placeholder="Disabled option">
    <nb-option value="INFO" disabled>Select Device...</nb-option>
    <nb-option *ngFor="let obj of deviceIDList" [value]="obj">{{obj}}</nb-option>
</nb-select>

and when i choose my device

changeStepperIDDevice = async (event) => {
     this.selectedStepperIDDevice = event;
}

on step n.2 i put the same select with the obj selected

<nb-select selected="DEVICE" disabled placeholder="Disabled">
    <nb-option value="DEVICE">{{selectedStepperIDDevice}}</nb-option>
</nb-select>

but id doesn't work... it empty... if i, put for example, an input to do the same

<input type="text" nbInput placeholder={{selectedStepperIDDevice}} disabled size="40%" />

it works... and it show me the selected device... but i just want it to works with the select so i can have a step by step setting device

can anyone help me?

thank you so much

question from:https://stackoverflow.com/questions/66045377/how-to-update-a-single-var-in-angular-after-change

Answer 1

just fix it in this way:

delete:

<nb-select selected="DEVICE" disabled placeholder="Disabled">
     <nb-option value="DEVICE">{{selectedStepperIDDevice}}</nb-option>
</nb-select>

and add:

<nb-select #myselect [selected]="selectedStepperIDDevice" disabled placeholder="Disabled">
     <nb-option *ngFor="let obj of deviceIDList" [value]="obj">{{obj}}</nb-option>
</nb-select>