CODEWITHSUNDEEP
jqueryangulartypescriptjquery-plugins
Ankush Jain
Ankush Jain

Reputation: 7069

How to use jQuery plugin in Angular2? Plugin runs before and DOM updates later

My aim is to apply jQuery plugin in angular2. It could be any plugin like jQuery.DataTable, bootstrap-select or etc.

What I am doing is fetching data from service. Service makes ajax request. I bind data to select or table using ngFor binding, and then call jQuery plugin function (using definition files) to render proper plugin.

The problem here is time difference. In first step I bind data, in second step I apply plugin but I think binding is little slow so that plugin's code runs before actual binding html renders. This is causing problem to me.

Sample code is below:

private loadPermissionGroups() {
        this.permissionManagerService.getPageData()
            .subscribe(res => {
                this.employeeList = res.Data.PageData.EmployeeList;
                // applyDataTable jQuery code
            },
            null,
            () => {
                this.showLoading = false;
            });
    };

Please suggest.

Upvotes: 2

Views: 459

Answers (1)

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

You can use directive also: 

/**
 * [Directive description]
 * @param {"[custom-dropdown]"}} {  selector [Directive for adding jQuery for select box]
 */

@Directive({
   selector: "[custom-dropdown]"
})


/**
 *[Class description]
 */
export class customDropdown implements AfterViewInit {
  constructor(public el: ElementRef) {}

  ngAfterViewInit() {
    $(this.el.nativeElement).selectpicker();
  }
}

Hope this will help you.

Upvotes: 2

Related Questions