ng-select items not visible

Question

I added ng-select to a new Angular 11 application, and it seems to be working fine until I open the dropdown. When I open the dropdown, I can select items but I don't really see them. There's 3 errors in the console every time I open the dropdown:

zone-evergreen.js:659 Unhandled Promise rejection: Cannot read properties of undefined (reading 'clientHeight') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'clientHeight')
    at ng-select.js:2268:1
    at ZoneDelegate.invoke (zone-evergreen.js:364:1)
    at Zone.run (zone-evergreen.js:123:1)
    at zone-evergreen.js:857:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Zone.runTask (zone-evergreen.js:167:1)
    at drainMicroTaskQueue (zone-evergreen.js:569:1)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484:1)
    at invokeTask (zone-evergreen.js:1621:1)
    at HTMLDivElement.globalZoneAwareCallback (zone-evergreen.js:1647:1) TypeError: Cannot read properties of undefined (reading 'clientHeight')
    at http://localhost:4200/vendor.js:12640:59
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:9528:30)
    at Zone.run (http://localhost:4200/polyfills.js:9287:47)
    at http://localhost:4200/polyfills.js:10021:40
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9563:35)
    at Zone.runTask (http://localhost:4200/polyfills.js:9331:51)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:9733:39)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:9648:25)
    at invokeTask (http://localhost:4200/polyfills.js:10785:18)
    at HTMLDivElement.globalZoneAwareCallback (http://localhost:4200/polyfills.js:10811:21)

ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at NgDropdownPanelComponent.ngOnInit (ng-select.js:2102:1)
    at callHook (core.js:4776:1)
    at callHooks (core.js:4746:1)
    at executeInitAndCheckHooks (core.js:4698:1)
    at selectIndexInternal (core.js:8140:1)
    at Module.ɵɵadvance (core.js:8123:1)
    at NgSelectComponent_ng_dropdown_panel_13_Template (ng-select.js:244:21)
    at executeTemplate (core.js:9269:1)
    at refreshView (core.js:9138:1)
    at refreshEmbeddedViews (core.js:10245:1)

core.js:5973 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at NgDropdownPanelComponent.ngOnInit (ng-select.js:2102:1)
    at callHook (core.js:4776:1)
    at callHooks (core.js:4746:1)
    at executeInitAndCheckHooks (core.js:4698:1)
    at selectIndexInternal (core.js:8140:1)
    at Module.ɵɵadvance (core.js:8123:1)
    at NgSelectComponent_ng_dropdown_panel_13_Template (ng-select.js:244:21)
    at executeTemplate (core.js:9269:1)
    at refreshView (core.js:9138:1)
    at refreshEmbeddedViews (core.js:10245:1)

I am honestly not sure what to even look at. It seems to function properly, but it's displayed incorrectly.

package.json (all Angular packages are at 11.0.1):

"@ng-select/ng-select": "^2.20.5",

This is the template:

<ng-select [items]="types"
  bindLabel="name"
  bindValue="id"
  placeholder="Select type"
  [(ngModel)]="selectedType">
</ng-select>

I have added NgSelectModule to my app.module.ts, too.

Answer 1

I believe this comes down to installing a specific version of ng-select. If you go to https://www.npmjs.com/package/@ng-select/ng-select, you can see the version table. Match your version of Angular with the correct version of ng-select and install that.

For example, if you are using Angular 9, you must run npm i @ng-select/[email protected]. I hope this helps.