ng-select in Angular5 issue : ERROR TypeError: Object(...) is not a function at NgDropdownPanelComponent.ngOnInit (ng-select.js

Question

I'm working with ng-select 2.0.0 in my project angular5 as in this link , i can get results from the api rest spring boot but i'm fascing a problem i get this error while i click on ng-select :

ERROR TypeError: Object(...) is not a function
at NgDropdownPanelComponent.ngOnInit (ng-select.js:1450)
at checkAndUpdateDirectiveInline (core.js:12352)
at checkAndUpdateNodeInline (core.js:13876)

and also i can't select the information ( in this case attribute 'nom') i want , it's like the ng select is blocked or somthing like this .

this is my code for project.component.html

<ng-select  *ngIf="_listClients"
             [items]="listClient"
              bindLabel ="nom"
              bindValue ="id"
            [(ngModel)]="selectedPersonId">

</ng-select>

<p>
  Selected city ID: {{selectedPersonId | json}}
</p>

This is the file project.component.ts

    import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ProjetService} from '../../../../../service/projet.service';
import {Projet} from '../../Models/Projet';
import { ModalDirective } from 'ngx-bootstrap/modal';
import 'rxjs/add/operator/map';
import {ClientService} from '../../../../../service/client.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {

  selectedPersonId:number = null;
  _listClients :any;


constructor(private router:Router,
              private projetSevice:ProjetService,
              private clientServ:ClientService,
              private route: ActivatedRoute) { }

ngOnInit() {

       this.clientList();
  }


get listClient() {
     return this._listClients ? this._listClients.map(item => {
      return {id: item.id, prenom : item.prenom , nom : item.nom}
    }) : [];
  }


  clientList(){

     this.clientServ.getListClients()
       .subscribe((data:any)=>{
        this._listClients=data;
       },err=>{
         console.log('this is error ');
       })

  }

}

Any help ?

I think, this version has issue. I found 2 issue request in the GitHub repo. Try to downgrade the version to v1.4.1. npm uninstall @ng-select/ng-select them npm i -s @ng-select/[email protected] — Ritwick Dey
– Ritwick Dey, Commented May 13, 2018 at 14:48
Thank you for your help , this fixed my issue and saved my time !! — dEs12ZER
– dEs12ZER, Commented May 13, 2018 at 15:11
with pleasur ,i have only one problem i can't use the scrollbar it's not working , should i add somthing to make it working ? — dEs12ZER
– dEs12ZER, Commented May 13, 2018 at 15:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

26

(Just copy pasting the answer from my comment to close the question)

I think,ng-select v2.0.0 has this issue. I found 2 issue request in the GitHub repo.

Workaround:

Try to downgrade the version to v1.4.1.

npm uninstall @ng-select/ng-select 
npm i -s @ng-select/[email protected]

EDIT: (25.05.18)

There issue is for breaking changes from Rxjs 6.0. If you're using Angular v5 install ng-select v1.x or install ng-select v2.0+ with rxjs-compat.

npm i -s @ng-select/[email protected]
//or
npm i -s @ng-select/ng-select@latest rxjs-compat

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 13, 2018 at 15:26

Ritwick Dey

19.1k4 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Truc Over a year ago

I downgraded the version to v1.4.1 and it worked well ^^

Duduman Bogdan Vlad Over a year ago

"npm i -s @ng-select/ng-select@latest rxjs-compat" not working. Downgrade works ;)

Mrvonwyl · Accepted Answer · 2018-05-15 09:38:38Z

3

As stated on in the readme of the repo https://github.com/ng-select/ng-select#v200:

Latest version targets Angular v6 since it uses new RxJS which has breaking changes. If you are using Angular v5 you could use ng-select v1.x or install rxjs-compat compatability package. We will support v1.x with latest bug fixes to allow easier migration. For v1.x you can refer the 1.x branch.

However using v2.0.0 with rxjs-compat didn't work for me. I am using Angular v5.2.9.

answered May 15, 2018 at 9:38

Mrvonwyl

3472 silver badges19 bronze badges

Comments

Banu S · Accepted Answer · 2022-02-22 07:00:03Z

0

Below are the ng-select version you have install for the respective Angular.x

if >=13.0.0 <14.0.0 - ng-select version should be v8.x
if >=12.0.0 <13.0.0 - ng-select version should be v7.x
if >=11.0.0 <12.0.0 - ng-select version should be v6.x
if >=10.0.0 <11.0.0 - ng-select version should be v5.x
if >=9.0.0 <10.0.0 - ng-select version should be v4.x
if >=8.0.0 <9.0.0 - ng-select version should be v3.x
if >=6.0.0 <8.0.0 - ng-select version should be v2.x
if v5.x.x - ng-select version should be v1.x

answered Feb 22, 2022 at 7:00

Banu S

113 bronze badges

Collectives™ on Stack Overflow

ng-select in Angular5 issue : ERROR TypeError: Object(...) is not a function at NgDropdownPanelComponent.ngOnInit (ng-select.js

3 Answers 3

Workaround:

EDIT: (25.05.18)

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Workaround:

EDIT: (25.05.18)

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related