$(...).selectpicker is not a function angular

118 views Asked by At

I'm trying to use bootstrap select on the angular project. And seems that some components, that are working with this kind of function are not working at all. My package.json: `

 "dependencies": {
        "@angular/animations": "^14.2.0",
        "@angular/common": "^14.2.0",
        "@angular/compiler": "^14.2.0",
        "@angular/core": "^14.2.0",
        "@angular/forms": "^14.2.0",
        "@angular/platform-browser": "^14.2.0",
        "@angular/platform-browser-dynamic": "^14.2.0",
        "@angular/router": "^14.2.0",
        "@ngx-translate/core": "^14.0.0",
        "@ngx-translate/http-loader": "^7.0.0",
        "@azure/msal-angular": "^2.4.5",
        "@azure/msal-browser": "^2.30.0",
        "bootstrap": "^4.5.0",
        "bootstrap-select": "^1.13.17",
        "d3": "6.7.0",
        "dagre": "^0.8.5",
        "jquery": "^3.5.1",
        "moment": "^2.26.0",
        "ngx-bootstrap": "5.1.2",
        "remixicon": "^2.5.0",
        "rxjs": "~7.5.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.4",
        "@angular/cli": "~14.2.4",
        "@angular/compiler-cli": "^14.2.0",
        "@types/jasmine": "~4.0.0",
        "jasmine-core": "~4.3.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "typescript": "~4.7.2"
    }

My angular part of code is simple, I am just trying to find some components by jQuery and inject a button inside this component, like this:

constructor(
        injector: Injector,
        private el: ElementRef,
        private layoutService: InternalMarketLayoutService
    ) {
        super(injector);
        this.actions = [
            new ActionItem(
                '',
                () =>
                    (<any>$('#' + this.id + this.extId)).selectpicker('toggle'),
                'ri-arrow-down-s-line',
                'PRIMARY',
                [],
                false,
                ''
            ),
        ];
    }

`

But still, it`s not working. And I have some errors, related to this part of the code, like this:

**ERROR TypeError: Lm(...).selectpicker is not a function**

It seems that the jQuery selector is working fine because on debug session I can see the element parameters and properties. I think, that some libraries or other modules can overwrite bootstrap-select functions.

0

There are 0 answers