How to remove
Property 'queryBuilder' does not exist on type 'JQuery < HTMLElement>'
on integration of Jquery query builder in Angular.
angular.json:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js",
...]
app.componenet.ts
import * as $ from 'jquery';
import 'jQuery-QueryBuilder/dist/js/query-builder.standalone.js';
import 'jQuery-QueryBuilder/dist/js/query-builder.js';
...
private getQueryBuilder() {
$('#builder').queryBuilder({
//plugins: ['bt-tooltip-errors'],
filters: [{
id: 'name',
label: 'Name',
type: 'string'
}, {
id: 'category',
label: 'Category',
type: 'integer',
input: 'select',
values: {
1: 'Books',
2: 'Movies',
3: 'Music',
4: 'Tools',
5: 'Goodies',
6: 'Clothes'
},
operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
}, {
id: 'in_stock',
label: 'In stock',
type: 'integer',
input: 'radio',
values: {
1: 'Yes',
0: 'No'
},
operators: ['equal']
}],
rules: this.rules_basic
});
}
ngAfterViewInit() {
this.getQueryBuilder();
}
I did things in this (How to use Jquery Query Builder in Angular) thread but It throws error and leads failed compilation. Sometimes application is running with this error also.
try this one, it will work.
import 'jquery';
import 'jQuery-QueryBuilder/dist/js/query-builder.min.js';
import 'jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js';
declare var $: any;