Search code examples
angularnpmangular-ngselect

ng-select dropdown is breaking on UI after upgrading to latest versions - Angular 6

I have migrated my application from Angular 5 to Angular 6. I have also updated ng-select version to 2.4.2, latest one from npm / GitHub.

After upgrading, the dropdown is breaking and I cannot see the dropdown design or style. just list of with broken HTML on UI.

Does anyone know how to fix it or which version of ng-select will work with Angular 6?

I have to use ng-select 2+ version because of 'labelForId' attribute there.

This is how package.json looks like.

"dependencies": {
    "@angular/animations": "^6.1.3",
    "@angular/common": "^6.1.3",
    "@angular/compiler": "^6.1.3",
    "@angular/core": "^6.1.3",
    "@angular/forms": "^6.1.3",
    "@angular/http": "^6.1.3",
    "@angular/platform-browser": "^6.1.3",
    "@angular/platform-browser-dynamic": "^6.1.3",
    "@angular/router": "^6.1.3",
    "@ng-bootstrap/ng-bootstrap": "^3.0.0",
    "@ng-select/ng-select": "2.4.2",

This is how it looks.

enter image description here

Does anyone know how to fix it?

Strange thing is it is working fine in "@ng-select/ng-select": "^0.16.0",

Solution

  • Check whether you import theme file in main app component (doc) 

    @import "~@ng-select/ng-select/themes/default.theme.css";
// ... or 
@import "~@ng-select/ng-select/themes/material.theme.css";

    Edit: Do your html template for ng-select like this? (demo)

    <ng-select [items]="items"
         bindLabel="name"
         bindValue="name"
         placeholder="Select city"
         [(ngModel)]="selectedCityName">
  <ng-template ng-option-tmp let-item="item" let-index="index">
      <img height="15" width="15" [src]="item.avatar"/>
      <b>{{item.name}}</b>
  </ng-template>
</ng-select>

    If not, the template is outdated. You code can not be used from ng-select version 2 or above. You have to update new code