[SOLVED] Angular ng-select: preselection by binding to an object doesn't work until focus

Angular ng-select: preselection by binding to an object doesn't work until focus

I am facing an issue with the ng-select component in my Angular app.

When I bind an object to a formControlName using Reactive Forms and set an initial value for the form control, the value is not displayed in the ng-select input field until I focus (click) on it.

Details:

I am using an object for the bindValue property
I have confirmed in the ngAfterViewInit hook that the selected value is correctly present in the form control and the objects in the items list and the form control value match perfectly
However, the input field remains empty until I manually click on it

Calling focus and then blur methods in the ngAfterViewInit hook does make it work, but I believe this is not the correct approach. Is this an issue with how ng-select handles initial object bindings? Am I missing something in the setup? How can I make it work the right way. Can someone help me to find the workaround of this issue?

Here is a StackBlitz link to reproduce the issue: StackBlitz Demo

Solution

You’ve included an empty template in your example for displaying the value. Simply removing the template should allow everything to work correctly.