Manually trigger change detection

* range renderer * toggle renderer For these two renderers we need to manually trigger change detection when data changes in the background.

Author: eneufeld

packages/angular-material/src/controls/range.renderer.ts

@@ -55,7 +55,7 @@ export class RangeControlRenderer extends JsonFormsControl {
  max: number;
  multipleOf: number;
 
- constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef:ChangeDetectorRef) {
+ constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
  super(jsonformsService);
  }
  getEventValue = (event: any) => Number(event.value);
@@ -65,7 +65,7 @@ export class RangeControlRenderer extends JsonFormsControl {
  this.max = this.scopedSchema.maximum;
  this.multipleOf = this.scopedSchema.multipleOf || 1;
  }
- this.changeDetectorRef.detectChanges();
+ this.changeDetectorRef.markForCheck();
  }
 }
 export const RangeControlRendererTester: RankedTester = rankWith(

packages/angular-material/src/controls/toggle.renderer.ts

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ChangeDetectorRef } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
  and,
@@ -51,11 +51,14 @@ import {
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToggleControlRenderer extends JsonFormsControl {
- constructor(jsonformsService: JsonFormsAngularService) {
+ constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
  super(jsonformsService);
  }
  isChecked = () => this.data || false;
  getEventValue = (event: any) => event.checked;
+ mapAdditionalProps() {
+ this.changeDetectorRef.markForCheck();
+ }
 }
 
 export const ToggleControlRendererTester: RankedTester = rankWith(