Set default dropdown bindLabel in @ng-select/ng-select on self change event in Angular?

Question

I have one scenario where i want to set default value to null in ng-select . if user select dropdown first then on change event should check Amount model is not null or blank afterward if Amount model is blank then ng-select should be set to null

In Html component

<input type="text" [(ngModel)]="Amount"/><br/><br/>
<label>Your ng-select</label><br/>
<ng-select [items]="currencyList"
           bindLabel="name"
           bindValue="name"
           placeholder="Select Currency"
           [(ngModel)]="selectedCurrency"
           (change)="onChangeDropdown()">
</ng-select><br/>

In typescript on change event function

onChangeDropdown(){
  if(this.Amount){

  }else{
    this.selectedCurrency = null;
    alert("enter amount first");
  }
}

here i have attach link : link for dropdown example

Even i also tested in normal html select dropdown this also show me as same output above

<select [(ngModel)]="selectedCurrency" class="form-control" (change)="onChangeDropdown()">
    <option>--Select Currency--</option>
    <option *ngFor="let c of currencyList" value="{{c.id}}">{{c.name}}</option>
</select>

It's only working for the first time, when I select more then once it's not working. Why this showing still INR or other currency name on dropdown list?

Answer 1

Change this.selectedCurrency value to undefined or empty string

onChangeDropdown(){
  if(this.Amount){

  }else{
    this.selectedCurrency = {};
    // or this.selectedCurrency = '';
    alert("enter amount first");
  }
}