Angular 4 - $(...).selectBoxIt is not a function

Question

Creating directive for SelectBoxIt plugin in Angular 4. Imported jQuery, jQuery UI and SelectBoxIt. Directive is imported in module and applied to select box. It throws following error:

ERROR TypeError: $(...).selectBoxIt is not a function
at MySelectBoxItDirective.ngAfterViewInit (my-select-box-it.directive.ts:14)
at callProviderLifecycles (core.js:12427)
at callElementProvidersLifecycles (core.js:12398)
at callLifecycleHooksChildrenFirst (core.js:12382)
at checkAndUpdateView (core.js:13515)
at callViewAction (core.js:13857)
at execComponentViewsAction (core.js:13789)
at checkAndUpdateView (core.js:13513)
at callViewAction (core.js:13857)
at execEmbeddedViewsAction (core.js:13815)

.angular-cli.json

"apps": [
{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-ui/ui/core.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/selectboxit/src/javascripts/jquery.selectBoxIt.min.js"
  ],
}
]

MySelectBoxIt Directive code:

import {AfterViewInit, Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[appMySelectBoxIt]'
})
export class MySelectBoxItDirective implements AfterViewInit {

    constructor(private el: ElementRef) { }

    ngAfterViewInit() {
        $(this.el.nativeElement).selectBoxIt({
            showFirstOption: true
        }).on('open', function() {
        });
    }
}

How to solve this error?

Angular 4 - $(...).selectBoxIt is not a function

0 Answers0