title: change the config in angular2-query-builder dynamically
body: <p>Here, i am trying to change the operators based on the field value in Angular2-query-builder. My TS file.</p>
  
  <pre><code>    @Component({
        selector: 'my-app',
        template: `
          &lt;div&gt;
            &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
          &lt;/div&gt;
          &lt;query-builder [(ngModel)]='uiExpression' [config]='config' (ngModelChange)="apply()" #que (onChangeCallback)="onchange()"&gt;
                &lt;ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet"&gt;
                  &lt;button mat-button (click)="addRule()"&gt;+ Rule&lt;/button&gt;
                  &lt;button mat-button (click)="addRuleSet()"&gt;+ Ruleset&lt;/button&gt;
                  &lt;button mat-button (click)="removeRuleSet()"&gt;- Ruleset&lt;/button&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryRemoveButton="let rule; let removeRule=removeRule"&gt;
                  &lt;button mat-icon-button color="accent" (click)="removeRule(rule)"&gt;
                    &lt;mat-icon&gt;remove&lt;/mat-icon&gt;
                  &lt;/button&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *querySwitchGroup="let ruleset"&gt;
                  &lt;mat-radio-group *ngIf="ruleset" [(ngModel)]="ruleset.condition"&gt;
                    &lt;mat-radio-button value="and"&gt;And&lt;/mat-radio-button&gt;
                    &lt;mat-radio-button value="or"&gt;Or&lt;/mat-radio-button&gt;
                  &lt;/mat-radio-group&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryInput="let rule; type: 'string'"&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput [(ngModel)]="rule.value"&gt;
                  &lt;/mat-form-field&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryInput="let rule; type: 'number'"&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput type="number" [(ngModel)]="rule.value"&gt;
                  &lt;/mat-form-field&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryInput="let rule; type: 'date'"&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput [matDatepicker]="picker" [(ngModel)]="rule.value"&gt;
                    &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
                    &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
                  &lt;/mat-form-field&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryInput="let rule; let field=field; let options=options; type: 'multiselect'"&gt;
                  &lt;mat-form-field&gt;
                    &lt;mat-select multiple [(ngModel)]="rule.value"&gt;
                      &lt;mat-option *ngFor="let opt of options" [value]="opt.value"&gt;
                        {{ opt.name }}
                      &lt;/mat-option&gt;
                    &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryField="let rule; let fields=fields; let changeField=changeField"&gt;
                  &lt;mat-form-field&gt;
                    &lt;mat-select [(ngModel)]="rule.field" (ngModelChange)="changeFields($event, rule)"&gt;
                      &lt;mat-option *ngFor="let field of fields" [value]="field.value"&gt;{{field.name}}&lt;/mat-option&gt;
                    &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
                &lt;/ng-container&gt;
                &lt;ng-container *queryOperator="let rule; let operators=operators"&gt;
                  &lt;mat-form-field&gt;
                    &lt;mat-select [(ngModel)]="rule.operator" (ngModelChange)="changeOperator(rule)"&gt;
                      &lt;mat-option *ngFor="let value of operators" [value]="value"&gt;{{value}}&lt;/mat-option&gt;
                    &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
                &lt;/ng-container&gt;
                &lt;/query-builder&gt;
              &lt;div&gt;{{userExpression}}&lt;/div&gt;
        `,
      })    
      export class App {
  public operators = [
          {
              "attributeType": "STRING",
              "operators": [
                  { "displayOperator": "Equals", "sqlOperator": " =(VALUE)" },
                  { "displayOperator": "Does not Equal", "sqlOperator": "&lt;&gt;(VALUE)" },
                  { "displayOperator": "Starts With", "sqlOperator": "LIKE %(VALUE)" },
                  { "displayOperator": "Ends With", "sqlOperator": "LIKE (VALUE)%" },
                  { "displayOperator": "Contains", "sqlOperator": "LIKE %(VALUE)%" },
                  { "displayOperator": "Does Not Contain", "sqlOperator": "NOT LIKE %(VALUE)" },
                  { "displayOperator": "Does Not Start With", "sqlOperator": "NOT LIKE (VALUE)%" },
                  { "displayOperator": "Does Not End With", "sqlOperator": "NOT LIKE %(VALUE)%" }
              ]
          },
          {
              "attributeType": "Numeric",
              "operators": [
                  { "displayOperator": "Equals", "sqlOperator": " =(VALUE)" },
                  { "displayOperator": "Does not Equal", "sqlOperator": "&lt;&gt;(VALUE)" },
                  { "displayOperator": "Greater", "sqlOperator": "&gt;(VALUE)" },
                  { "displayOperator": "Equal or Greater", "sqlOperator": "&gt;=(VALUE)" },
                  { "displayOperator": "Less", "sqlOperator": "&lt;(VALUE)" },
                  { "displayOperator": "Equal or Less", "sqlOperator": "&lt;=(VALUE)" },
                  { "displayOperator": "Within", "sqlOperator": "BETWEEN (VALUE1) AND (VALUE2)" },
              ]
          },
          {
              "attributeType": "Date",
              "operators": [
                  { "displayOperator": "Equals", "sqlOperator": " =(VALUE)" },
                  { "displayOperator": "On or After", "sqlOperator": "&gt;=(VALUE)" },
                  { "displayOperator": "Before", "sqlOperator": "&lt;(VALUE)" },
                  { "displayOperator": "Between", "sqlOperator": "BETWEEN (VALUE1) AND (VALUE2)" }
              ]
          }
      ]
            AttributeDummy: any[] = [
              {
                "userColumnName": "Attribute 1",
                "colType": "multiselect",
                "isListType": "Y",
                "userColumnOptions": [
                  { name: "Male", value: "m" },
                  { name: "Female", value: "f" }
                ]
              },
              {
                "userColumnName": "Attribute 2",
                "colType": "date",
                "isListType": "N",
                "userColumnOptions": ""
              },
              {
                "userColumnName": "Attribute 3",
                "colType": "string",
                "isListType": "N",
                "userColumnOptions": ""
              },
              {
                "userColumnName": "Attribute 4",
                "colType": "number",
                "isListType": "N",
                "userColumnOptions": ""
              }
            ]
            name: string;
            uiExpression = {};
            fieldsS = {}
            @Input() config: QueryBuilderConfig = {
              fields: {}
            }
            userExpression: String = 'Attribute = undefined';
            constructor() {
              this.name = `Plunker! v${VERSION.full}`;
              for (var i = 0; i &lt; this.AttributeDummy.length; i++) {
                // operators: (this.AttributeDummy[i].colType.toLowerCase()==this.operator.operators[0].attributeType.toLowerCase()) ? this.operator.operators[0].operators : 
                // (this.AttributeDummy[i].colType.toLowerCase()==this.operator.operators[1].attributeType.toLowerCase()) ? this.operator.operators[1].operators : 
                // (this.AttributeDummy[i].colType.toLowerCase()==this.operator.operators[2].attributeType.toLowerCase()) ? this.operator.operators[2].operators : ''
                this.fieldsS[this.AttributeDummy[i].userColumnName] = {
                  name: this.AttributeDummy[i].userColumnName,
                  type: this.AttributeDummy[i].colType.toLowerCase(),
                  operators: this.operators,
                  options: this.AttributeDummy[i].userColumnOptions
                }
                this.config.fields = this.fieldsS;
                this.detect.markForCheck();
                console.log('config ', JSON.stringify(this.config))
              }
              if (this.AttributeDummy.length &gt; 0) {
                console.log('attributes length &gt; 0');
                this.uiExpression = {
                  condition: 'and',
                  rules: [
                    {
                      field: this.AttributeDummy[0].userColumnName,
                      operator: this.operators[0]
                    }
                  ]
                }
              }
            }
          }
  </code></pre>
  
  <p>while changing the attribute am trying to update operators in the query builder dynamically into the UI. I updating the operators list into config but it won't updating into the UI.</p>
  
  <p>Here, one reference link: <a href="https://zebzhao.github.io/Angular-QueryBuilder/demo/" rel="nofollow noreferrer">https://zebzhao.github.io/Angular-QueryBuilder/demo/</a> I want to update the operators based on the field.</p>