Looking for a way of using the jQuery Query Builder in my angular-cli project.

First I've tried using the plugin laplasianin/angular-jqueryQueryBuilder, but I miss instructions on how to actually import this into my ponent. I am very novice at angular/typescript.

Then I've tried it on my own by installing the builder package: npm install jQuery-QueryBuilder

I've added it to my ponent, just like jQuery. This is the resulting example code, based on the following demo:

import {AfterViewInit, Component} from "@angular/core";
import * as jQuery from "jquery";
import "jQuery-QueryBuilder/dist/js/query-builder.standalone.js";
import "jQuery-QueryBuilder/dist/css/query-builder.default.css";

@Component({
    selector: 'app-query-builder',
    templateUrl: './query-builderponent.html',
    styleUrls: ['./query-builderponent.scss']
})
export class QueryBuilderComponent implements AfterViewInit{
    protected rules_basic = {
        condition: 'AND',
        rules: [{
            id: 'price',
            operator: 'less',
            value: 10.25
        }, {
            condition: 'OR',
            rules: [{
                id: 'category',
                operator: 'equal',
                value: 2
            }, {
                id: 'category',
                operator: 'equal',
                value: 1
            }]
        }]
    };

    ngAfterViewInit() {
        this.getQueryBuilder();
    }


    private getQueryBuilder() {
        // jQuery('#builder').html('appelsap');
        let queryBuilder = jQuery.fn.queryBuilder;
        jQuery('#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']
            }, {
                id: 'price',
                label: 'Price',
                type: 'double',
                validation: {
                    min: 0,
                    step: 0.01
                }
            }, {
                id: 'id',
                label: 'Identifier',
                type: 'string',
                placeholder: '____-____-____',
                operators: ['equal', 'not_equal'],
                validation: {
                    format: /^.{4}-.{4}-.{4}$/
                }
            }],

            rules: this.rules_basic
        });
    }
}

In this case the app piles and loads, but I get the following error in return Cannot read property 'template' of undefined.

I have no clue on how to get any of this working. Would really like some help on this. Thank you.

======= EDIT As asked, this is the plete error:

ERROR TypeError: Cannot read property 'template' of undefined
    at QueryBuilder.<anonymous> (query-builder.standalone.js:415)
    at Array.forEach (<anonymous>)
    at new QueryBuilder (query-builder.standalone.js:410)
    at jQuery.fn.init.$.fn.queryBuilder (query-builder.standalone.js:3934)
    at QueryBuilderComponent.webpackJsonp.../../../../../src/app/ponents/application/query-builder/query-builderponent.ts.QueryBuilderComponent.getQueryBuilder (query-builderponent.ts:40)
    at QueryBuilderComponent.webpackJsonp.../../../../../src/app/ponents/application/query-builder/query-builderponent.ts.QueryBuilderComponent.ngAfterViewInit (query-builderponent.ts:33)
    at callProviderLifecycles (core.es5.js:11269)
    at callElementProvidersLifecycles (core.es5.js:11244)
    at callLifecycleHooksChildrenFirst (core.es5.js:11228)
    at checkAndUpdateView (core.es5.js:12325)

======= EDIT Updated the code to reflect current usage.

Looking for a way of using the jQuery Query Builder in my angular-cli project.

First I've tried using the plugin laplasianin/angular-jqueryQueryBuilder, but I miss instructions on how to actually import this into my ponent. I am very novice at angular/typescript.

Then I've tried it on my own by installing the builder package: npm install jQuery-QueryBuilder

I've added it to my ponent, just like jQuery. This is the resulting example code, based on the following demo:

import {AfterViewInit, Component} from "@angular/core";
import * as jQuery from "jquery";
import "jQuery-QueryBuilder/dist/js/query-builder.standalone.js";
import "jQuery-QueryBuilder/dist/css/query-builder.default.css";

@Component({
    selector: 'app-query-builder',
    templateUrl: './query-builder.ponent.html',
    styleUrls: ['./query-builder.ponent.scss']
})
export class QueryBuilderComponent implements AfterViewInit{
    protected rules_basic = {
        condition: 'AND',
        rules: [{
            id: 'price',
            operator: 'less',
            value: 10.25
        }, {
            condition: 'OR',
            rules: [{
                id: 'category',
                operator: 'equal',
                value: 2
            }, {
                id: 'category',
                operator: 'equal',
                value: 1
            }]
        }]
    };

    ngAfterViewInit() {
        this.getQueryBuilder();
    }


    private getQueryBuilder() {
        // jQuery('#builder').html('appelsap');
        let queryBuilder = jQuery.fn.queryBuilder;
        jQuery('#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']
            }, {
                id: 'price',
                label: 'Price',
                type: 'double',
                validation: {
                    min: 0,
                    step: 0.01
                }
            }, {
                id: 'id',
                label: 'Identifier',
                type: 'string',
                placeholder: '____-____-____',
                operators: ['equal', 'not_equal'],
                validation: {
                    format: /^.{4}-.{4}-.{4}$/
                }
            }],

            rules: this.rules_basic
        });
    }
}

In this case the app piles and loads, but I get the following error in return Cannot read property 'template' of undefined.

I have no clue on how to get any of this working. Would really like some help on this. Thank you.

======= EDIT As asked, this is the plete error:

ERROR TypeError: Cannot read property 'template' of undefined
    at QueryBuilder.<anonymous> (query-builder.standalone.js:415)
    at Array.forEach (<anonymous>)
    at new QueryBuilder (query-builder.standalone.js:410)
    at jQuery.fn.init.$.fn.queryBuilder (query-builder.standalone.js:3934)
    at QueryBuilderComponent.webpackJsonp.../../../../../src/app/ponents/application/query-builder/query-builder.ponent.ts.QueryBuilderComponent.getQueryBuilder (query-builder.ponent.ts:40)
    at QueryBuilderComponent.webpackJsonp.../../../../../src/app/ponents/application/query-builder/query-builder.ponent.ts.QueryBuilderComponent.ngAfterViewInit (query-builder.ponent.ts:33)
    at callProviderLifecycles (core.es5.js:11269)
    at callElementProvidersLifecycles (core.es5.js:11244)
    at callLifecycleHooksChildrenFirst (core.es5.js:11228)
    at checkAndUpdateView (core.es5.js:12325)

======= EDIT Updated the code to reflect current usage.

• javascript
• jquery
• angular
• typescript

Share Improve this question Follow edited Jun 29, 2017 at 9:22 Roberto asked Jun 29, 2017 at 9:08 RobertoRoberto 18911 gold badge66 silver badges1616 bronze badges 4

• Could you post the whole error code ? It says something about template, but you have absolutely no template in the code you provided. – user4676340 Commented Jun 29, 2017 at 9:10
• jquery only works after view init. Hence run the code under ngAfterViewInit(){} function – thangavel .R Commented Jun 29, 2017 at 9:18
• I've updated the code above to reflect my current class. This includes using ngAfterViewInit where the template error also occurs. – Roberto Commented Jun 29, 2017 at 9:22
• Trying several different hooks and the error still occurs. I've looked into what templates should hold, and it seems that it should be the contents from template.js from the src directory of the package, but this feels wrong. – Roberto Commented Jun 29, 2017 at 9:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Firstly, laplasianin/angular-jqueryQueryBuilder is an AngularJs (1) library.

Secondly, if you set this lines in your anglar-cli.json you will be able to make it works:

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/jQuery-QueryBuilder/dist/css/query-builder.default.css",
    "styles.css"
  ],
  "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"        
  ],

Your ponent:

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

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent implements AfterViewInit {

 protected rules_basic = {
        condition: 'AND',
        rules: [{
            id: 'price',
            operator: 'less',
            value: 10.25
        }, {
            condition: 'OR',
            rules: [{
                id: 'category',
                operator: 'equal',
                value: 2
            }, {
                id: 'category',
                operator: 'equal',
                value: 1
            }]
        }]
    };

    ngAfterViewInit() {
        this.getQueryBuilder();
    }

    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']
            }, {
                id: 'price',
                label: 'Price',
                type: 'double',
                validation: {
                    min: 0,
                    step: 0.01
                }
            }, {
                id: 'id',
                label: 'Identifier',
                type: 'string',
                placeholder: '____-____-____',
                operators: ['equal', 'not_equal'],
                validation: {
                    format: /^.{4}-.{4}-.{4}$/
                }
            }],

            rules: this.rules_basic
        });
    }

}

Don't forget:

• npm install bootstrap --save
• npm install jquery --save
• npm install jQuery-QueryBuilder --save

Unfortunately, you will not have any autopletion but it works.