Use ChangeDetectionStrategy in Angular

Improve Angular performance by using `ChangeDetectionStrategy.OnPush` By default all components are updated on any change. Using the detection strategy the check time was reduced to less than 5% (e.g. person example 20ms to 0.7ms).

Author: eneufeld

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

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
@@ -90,7 +90,8 @@ import { startWith } from 'rxjs/operators';
  <mat-hint>{{ description }}</mat-hint>
  <mat-error>{{ error }}</mat-error>
  </mat-form-field>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AutocompleteControlRenderer extends JsonFormsControl {
  @Input() options: string[];

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

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewRef} from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
 
@@ -46,14 +46,21 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
  <mat-hint class="mat-caption">{{ description }}</mat-hint>
  <mat-error class="mat-caption">{{ error }}</mat-error>
  </div>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BooleanControlRenderer extends JsonFormsControl {
- constructor(jsonformsService: JsonFormsAngularService) {
+ constructor(jsonformsService: JsonFormsAngularService, private changeDetectionRef: ChangeDetectorRef) {
  super(jsonformsService);
  }
  isChecked = () => this.data || false;
  getEventValue = (event: any) => event.checked;
+
+ mapAdditionalProps() {
+ if (!(this.changeDetectionRef as ViewRef).destroyed) {
+ this.changeDetectionRef.markForCheck();
+ }
+ }
 }
 
 export const booleanControlTester: RankedTester = rankWith(2, isBooleanControl);

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

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import {
  getLocale,
  isDateControl,
@@ -52,7 +52,8 @@ import { DateAdapter, NativeDateAdapter } from '@angular/material/core';
  <mat-hint>{{ description }}</mat-hint>
  <mat-error>{{ error }}</mat-error>
  </mat-form-field>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateControlRenderer extends JsonFormsControl {
  constructor(

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

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
  getLocale,
@@ -51,7 +51,8 @@ import {
  <mat-hint>{{ description }}</mat-hint>
  <mat-error>{{ error }}</mat-error>
  </mat-form-field>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NumberControlRenderer extends JsonFormsControl {
  private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;

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

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
 
@@ -41,7 +41,8 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
  <mat-hint>{{ description }}</mat-hint>
  <mat-error>{{ error }}</mat-error>
  </mat-form-field>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TextControlRenderer extends JsonFormsControl {
  constructor(jsonformsService: JsonFormsAngularService) {

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

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
 
@@ -40,7 +40,8 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
  <mat-hint>{{ description }}</mat-hint>
  <mat-error>{{ error }}</mat-error>
  </mat-form-field>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TextAreaRenderer extends JsonFormsControl {
  constructor(jsonformsService: JsonFormsAngularService) {

packages/angular-material/src/layouts/group-layout.renderer.ts

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { GroupLayout, RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
 import { LayoutRenderer } from './layout.renderer';
 import { JsonFormsAngularService } from '@jsonforms/angular';
@@ -36,11 +36,12 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
  <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
  </div>
  </mat-card>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GroupLayoutRenderer extends LayoutRenderer<GroupLayout> {
- constructor(jsonFormsService: JsonFormsAngularService) {
- super(jsonFormsService);
+ constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
+ super(jsonFormsService, changeDetectionRef);
  }
 }
 export const groupLayoutTester: RankedTester = rankWith(1, uiTypeIs('Group'));

packages/angular-material/src/layouts/horizontal-layout.renderer.ts

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import {
  HorizontalLayout,
  RankedTester,
@@ -45,11 +45,12 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
  <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
  </div>
  </div>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HorizontalLayoutRenderer extends LayoutRenderer<HorizontalLayout> {
- constructor(jsonFormsService: JsonFormsAngularService) {
- super(jsonFormsService);
+ constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
+ super(jsonFormsService, changeDetectionRef);
  }
 }
 export const horizontalLayoutTester: RankedTester = rankWith(

packages/angular-material/src/layouts/layout.renderer.ts

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
 import {
  JsonFormsAngularService,
  JsonFormsBaseRenderer
@@ -41,7 +41,7 @@ export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
  hidden: boolean;
  private subscription: Subscription;
 
- constructor(private jsonFormsService: JsonFormsAngularService) {
+ constructor(private jsonFormsService: JsonFormsAngularService, protected changeDetectionRef: ChangeDetectorRef) {
  super();
  }
 
@@ -50,6 +50,7 @@ export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
  next: (state: JsonFormsState) => {
  const props = mapStateToLayoutProps(state, this.getOwnProps());
  this.hidden = !props.visible;
+ this.changeDetectionRef.markForCheck();
  }
  });
  }

packages/angular-material/src/layouts/vertical-layout.renderer.ts

@@ -22,7 +22,7 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import {
  RankedTester,
  rankWith,
@@ -40,11 +40,12 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
  <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
  </div>
  </div>
- `
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VerticalLayoutRenderer extends LayoutRenderer<VerticalLayout> {
- constructor(jsonFormsService: JsonFormsAngularService) {
- super(jsonFormsService);
+ constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
+ super(jsonFormsService, changeDetectionRef);
  }
 }
 export const verticalLayoutTester: RankedTester = rankWith(