Default value of ng-select

Question

I tried to wrap ng-select into a reusable component. Everything works fine except ng-select does not display the default value. Reproducible example here: Stackblitz

How can I get ng-select to display the default/initial value?

Thank you

Answer 1

In select-input.component.html you made 2 mistakes.

<ng-select #combo [ngClass]="
      controlDir && controlDir.control && controlDir.control.touched
        ? !controlDir.control.valid
          ? 'invalid-select'
          : 'valid-select'
        : null
    " placeholder="Select Type" [multiple]="multiple" [items]="items" bindLabel="{{ bindLabel }}"
    bindValue="{{ bindValue }}" [clearable]="clearable" (change)="onSelectionChange($event)" (focus)="onTouched()"
    ([ngModel])="(selectedValue)">
</ng-select>

First: [(ngModel)] they call "banana in a box", so it's always braces inside brackets and not the other way round.

Second: the term inside the double quotes must not be surrounded by braces.

 [(ngModel)]="selectedValue"

Should work now.