Angular-QueryBuilder: Dynamically changing fields

Question

Is there a way to dynamically change which fields are available to Angular-QueryBuilder?

I've tried:

1. Updating the fields property of my QueryBuilderConfig.
   • Nothing happens.
2. Removing and re-adding the component using ngIf and ChangeDetectorRef.
   • The fields do update.
   • However, now certain fields break the query builder. When any of those fields is selected, the add rule and add ruleset buttons appear to do nothing. You have to remove the problem field before your additions show up.
   • Video: https://i.imgur.com/UXZgpQ4.mp4

Answer 1

My issue was my field objects. They didn't have value properties, so Angular-QueryBuilder was creating value properties whose values were auto-incrementing integer IDs.

Since I was filtering from a source array without deep-cloning, value was also getting set on the objects in the source array. Then the indices would be wrong when items were removed after filtering.