ERROR TypeError: $(...).ejListBox is not a function

Question

Hi,I am using ejListBox this.fieldsdata = { text: "displayName", value: "id" }; this.showCheckbox = true; this.columns = [];ngOnInit() { this.apiService.getColumns().subscribe(data => { this.columns = data; $("#columnsListBox").ejListBox({ dataSource: this.columns }); }); }the columns are get normally from api, but don't bind to the listand errors "core.js:1350 ERROR TypeError: $(...).ejListBox is not a function" appears.BTW: the list was working normally before some other changes done to the application like moving components and htmls to subfolders, and also note that other syncfusion controls are working normally at other components, like grid and dropdown.Waiting for your advice.Thanks

Arun Palaniyandi · Answer

Hi Dina Abdelbary,  
   
Thanks for contacting Syncfusion support.  
 
We have tried to replicate your reported issue and hence we can able to reproduce it. After validating this issue we found the issue is because the jQuery is not loaded in the ngOnInit() function. Since our components will be rendered only after the jQuery document ready it is not possible to render our Listbox component inside the ngOnInit() function. And the right way to do is to call it inside ngAfterViewInit() function because in this function the jQuery references will be loaded and hence our component will be rendered. Also DOM element of Syncfusion Angular component only appears after ngAfterViewInit of Angular lifecycle, Since we need to get instance in ngAfterViewInit of Angular component 
 
Reference link: 
https://stackoverflow.com/questions/35974490/jquery-function-not-called-at-page-load-in-angular-2 
 
 
If you want to render Essential JS1 components in the ngOnInit(), you have to reach into the DOM element by using elementRef and which can be imported and injecting it into the constructor of the angular component. This method runs after the constructor method called, which means that all of the injected dependencies will be resolved and all of the class members will be defined.   
  
Please refer to the following code.  
 




 
 
import { Component, ElementRef, OnInit } from '@angular/core'; //import Elementref,onInit 
 
declare var jQuery:any; //declare jQuery 
 
@Component({ 
    selector: 'ej-app', 
    templateUrl: 'src/listbox/listbox.component.html', 
}) 
export class ListBoxComponent implements OnInit{ 
     
    elementRef: ElementRef; 
    public Data: any; 
     
   constructor(elementRef: ElementRef) { 
        this.elementRef = elementRef; 
           ……….. 
            } 
    ngOnInit(){ 
 
        jQuery(this.elementRef.nativeElement).ejListBox({  //declare like this using the native element and use jQuery 
            dataSource: this.Data,   
                       fields: {text: "Summary",}, 
                       showCheckbox:true 
                       
        }) 
    } 
} 
 
 
 
 
 
Sample : http://www.syncfusion.com/downloads/support/forum/135214/ze/angular-135214-912730393 
 
 
Please let us know if you have any queries further. 
 
Regards, 
Arun P.