how to use this plugin with Angular

[sprakashg]

is there a directive available to include in angular

[mistic100]

there is not

[sprakashg]

Oh .. any plans to support angular in near future?. Its an awesome plugin

[mistic100]

I don't know enough about Angular to do it.

[mistic100]

what need to be done :

• [ ] transmission of config (QueryBuilder does not support live update of config, so don't need any data binding)
• [ ] data binding for builder output
• [ ] data binding for errors ?
• [ ] handle events in a Angular way (don't know how)
• [ ] calling plugin methods from angular, means we need to expose the builder object ($('#builder')[0].queryBuilder) in the scope

directive :

<query-builder ng-model="rules" builder="referenceToBuilder" options="configObject" />

(these are thoughs, I'm not working on it)

[mistic100]

actually a nice feature would be to bind filters config, this would require to work on #136 before

[jsdev]

I am actually using this within an angular project and it works fantastic. I also have extended it to have an entity field, and added triggers based on your well document code, to dynamically change the filters.

I'll post a link when i get the fork into github.

[kevintc]

@jsdev I'm really interested by your use of Angular, any chance you got a link to download the source or any infos on how you did it ? :)

[DPalkar]

Hello, I also am working on an angularJS app. I was able to integrate queryBuilder within the angularApp. It works great but partially. I use the stand alone version. And I include it in my index.html itself (not using requireJS like my other modules). When I create a build using grunt (put everything down into one JS file), it refuses to work. it gives me this error -> (...).queryBuilder is not a function. Even though the stand alone file is loaded successfully. @jsdev , were you able to fork into github? really stuck!

[JobaDiniz]

An angular version would be awesome... couldn't find any so far.

[rsangiovanni]

no news on the angular version?

[mistic100]

contributions are still welcomed :-)

[laplasianin]

@sprakashg @mistic100 @jsdev @kevintc @DPalkar @rsangiovanni @JobaDiniz Hello everyone, I wrote simple angular directive for jQueryQueryBuilder, you can use it this way: <query-builder options="options" builder="qb"></query-builder>

Please check it out: https://github.com/laplasianin/angular-jqueryQueryBuilder

[cyl3392207]

you can also use it and listen to the event the querybuilder emits. in the event handler, you can update the property you need.

[shaoXunLu]

how to use this plugin with Angular JS

[Caroga]

I've tried and run into the same problem as the following StackOverflow issue. After successfully injecting jQuery and the QueryBuilder into my component, I get a Cannot read property 'template' of undefined error in my console.

Code is practically the same as in the SO question, if someone know how to prevent this from happening I'd love to hear this.

https://stackoverflow.com/questions/43953072/template-of-undefined-while-implement-query-builder-with-angular-2

[nasikshafeek]

Anyone implementing / porting this on Angular2+?

[mistic100]

You can check this plunkr for Angular usage https://embed.plnkr.co/13rGVC/ (it's not mine)

[aryanisml]

It's great to used the Jquery Query builder with Angular 1.6, Used almost all API and Events of query builder in my application, Now time to migrate the Angular 1.6 to Angular 4 so finding on google and got the https://embed.plnkr.co/13rGVC/ it is made in Angular 2, So trying to replicate the same thing in Angular 4 it shows the error.... Is any one integrate the Jquery Query builder with Angular 4 then it will be great help to start the migration.

[jonsavage]

In case anyone stumbles across this like I did, the above mentioned Plunkr: https://embed.plnkr.co/13rGVC/ is gold. While it appears to be broken due to some dependency issues it worked just fine locally 😄

[krishnasoft21]

I am actually using this within an angular project and it works fantastic. I also have extended it to have an entity field, and added triggers based on your well document code, to dynamically change the filters.

I'll post a link when i get the fork into github.

That's interesting. Can you share link to github or sample code to demonstrate the use of entity field and trigger events to change the filters ?