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

Question

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.

Does anyone know how to fix it?

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

hgiasac · Accepted Answer · 2018-08-17T06:56:01.943

3

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

edited Aug 17 '18 at 06:56

answered Aug 17 '18 at 05:54

hgiasac

2,183
16
14

I added and dropdown is coming but inner content is div which is coming as it is. Please see attached image in my question updated. – Aakash Kumar Aug 17 '18 at 06:12
Show your html syntax. It is error from the template. ng-select 2 may have breaking change – hgiasac Aug 17 '18 at 06:41
under [items] I am passing some content from Component which includes some divs and spans. Please see my updated question image. Where It is just adding – Aakash Kumar Aug 17 '18 at 06:44
I mean you should show the template code in your source code, please – hgiasac Aug 17 '18 at 06:50
I update code and demo for `ng-select`. If you code aren't matched, please update your code. It is olddated – hgiasac Aug 17 '18 at 06:57
i added above code using ng-option-tmp and ng-template, i can still see tags on UI. – Aakash Kumar Aug 17 '18 at 09:12
I fixed the issue by remembering to commit package.json... *facepalm*. – Drew Jan 29 '19 at 00:21

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

1 Answers1