Add Angular component config support

- add config input to Angular root component
- use two way databinding in example for data

Also fixes initial readonly value passing in the Angular
root component.

Author: eneufeld

packages/angular-material/example/app/app.component.ts

@@ -49,7 +49,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
   selector: 'app-root',
   template: `
     <h1>Angular Material Examples</h1>
-    Data: {{ data | json }}
+    Data: {{ selectedExample.data | json }}
     <div>
       Example:
       <select (change)="onChange($event)">
@@ -71,14 +71,14 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       </button>
     </div>
     <jsonforms
-      [data]="selectedExample.data"
+      [(data)]="selectedExample.data"
       [schema]="selectedExample.schema"
       [uischema]="selectedExample.uischema"
       [renderers]="renderers"
-      (dataChange)="onDataChange($event)"
       [locale]="currentLocale"
       [uischemas]="uischemas"
       [readonly]="readonly"
+      [config]="config"
     ></jsonforms>
   `
 })
@@ -97,10 +97,6 @@ export class AppComponent {
     this.selectedExample = this.examples[19];
   }
 
-  onDataChange(data: any) {
-    this.data = data;
-  }
-
   onChange(ev: any) {
     this.selectedExample = this.examples.find(e => e.name === ev.target.value);
   }

packages/angular-material/example/app/store.ts

@@ -26,7 +26,7 @@ import {
     Component,
     EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
 } from '@angular/core';
-import { JsonFormsRendererRegistryEntry, JsonSchema, UISchemaElement, UISchemaTester, ValidationMode } from '@jsonforms/core';
+import { Actions, JsonFormsRendererRegistryEntry, JsonSchema, UISchemaElement, UISchemaTester, ValidationMode } from '@jsonforms/core';
 import { Ajv } from 'ajv';
 import { JsonFormsAngularService, USE_STATE_VALUE } from './jsonforms.service';
 @Component({
@@ -46,6 +46,7 @@ export class JsonForms implements OnChanges, OnInit {
     @Input() readonly: boolean;
     @Input() validationMode: ValidationMode;
     @Input() ajv: Ajv;
+    @Input() config: any;
 
     private initialized = false;
 
@@ -63,7 +64,9 @@ export class JsonForms implements OnChanges, OnInit {
             },
             uischemas: this.uischemas,
             i18n: { locale: this.locale, localizedSchemas: undefined, localizedUISchemas: undefined },
-            renderers: this.renderers
+            renderers: this.renderers,
+            config: this.config,
+            readonly: this.readonly
         });
         this.jsonformsService.$state.subscribe(state => {
             const data = state?.jsonforms?.core?.data;
@@ -88,6 +91,7 @@ export class JsonForms implements OnChanges, OnInit {
         const newReadonly = changes.readonly;
         const newValidationMode = changes.validationMode;
         const newAjv = changes.ajv;
+        const newConfig = changes.config;
 
         if (newData || newSchema || newUiSchema || newValidationMode || newAjv) {
             this.jsonformsService.updateCoreState(
@@ -114,5 +118,9 @@ export class JsonForms implements OnChanges, OnInit {
         if (newReadonly && !newReadonly.isFirstChange()) {
             this.jsonformsService.setReadonly(newReadonly.currentValue);
         }
+
+        if (newConfig && !newConfig.isFirstChange()) {
+            this.jsonformsService.updateConfig(Actions.setConfig(newConfig.currentValue));
+        }
     }
 }