I've encountered an issue in my Angular project where I'm trying to set a default value for the ng-select dropdown, but it doesn't seem to be working properly. The dropdown does not update when there is a change.
Let's take a look at the code:
Template Code
<ng-select
[items]="countries"
class="text-capitalize"
bindValue="id"
[closeOnSelect]="true"
[(ngModel)]="defaultCountry"
[searchable]="true"
(change)="changeCountry($event)"
placeholder="{{
_translate.currentLang == 'en'
? 'Country'
: _translate.currentLang == 'ps'
? 'هیواد'
: 'کشور'
}}"
[formControlName]="countryControlName"
>
<ng-template ng-label-tmp let-item="item">
{{
_translate.currentLang == "en"
? item.label_en
: _translate.currentLang == "ps"
? item.label_ps
: item.label_fa
}}
</ng-template>
<ng-template ng-option-tmp let-item="item">
{{
_translate.currentLang == "en"
? item.label_en
: _translate.currentLang == "ps"
? item.label_ps
: item.label_fa
}}
</ng-template>
</ng-select>
Typescript Code
defaultCountry:any;
this.countries = [ {id: "1", label_en: "Afghanistan", label_ps: "افغانستان", label_fa: "افغانستان", value: "Afghanistan"},
{id: "3", label_ps: "البانیا", label_fa: "البانیا", label_en: "Albania", value: "Albania"},
{id: "3", label_ps: "الجزایر", label_fa: "الجزایر", label_en: "Algeria", value: "Algeria"}];
this.defaultCountry = '1';