Accept an NgZone in ReactWrapperComponent to prepare for better template change detection

Author: Ben Grynhaus

libs/core/src/lib/components/wrapper-component.ts

@@ -9,6 +9,7 @@ import {
   ElementRef,
   Injector,
   Input,
+  NgZone,
   OnChanges,
   Renderer2,
   SimpleChanges,
@@ -48,8 +49,21 @@ export type JsxRenderFunc<TContext> = (context: TContext) => JSX.Element;
 export type ContentClassValue = string[] | Set<string> | { [klass: string]: any };
 export type ContentStyleValue = string | StyleObject;
 
+/**
+ * Optional options to pass to `ReactWrapperComponent`.
+ */
 export interface WrapperComponentOptions {
+  /**
+   * Whether the host's `display` should be set to the root child node's`display`.
+   * @default `false`.
+   */
   readonly setHostDisplay?: boolean;
+
+  /**
+   * The zone to use to track changes to inner (Angular) templates & components.
+   * @default `undefined`.
+   */
+  readonly ngZone?: NgZone;
 }
 
 const defaultWrapperComponentOptions: WrapperComponentOptions = {
@@ -65,6 +79,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   private _contentClass: Many<ContentClassValue>;
   private _contentStyle: ContentStyleValue;
 
+  private _ngZone: NgZone;
   private _shouldSetHostDisplay: boolean;
 
   protected abstract reactNodeRef: ElementRef<HTMLElement>;
@@ -119,8 +134,9 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     public readonly elementRef: ElementRef<HTMLElement>,
     private readonly changeDetectorRef: ChangeDetectorRef,
     private readonly renderer: Renderer2,
-    { setHostDisplay }: WrapperComponentOptions = defaultWrapperComponentOptions
+    { setHostDisplay, ngZone }: WrapperComponentOptions = defaultWrapperComponentOptions
   ) {
+    this._ngZone = ngZone;
     this._shouldSetHostDisplay = setHostDisplay;
   }
 

libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -2,7 +2,16 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Breadcrumb';
 
 @Component({

libs/fabric/src/lib/components/button/action-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabActionButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }

libs/fabric/src/lib/components/button/base-button.component.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2 } from '@angular/core';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit {
@@ -90,8 +90,8 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   onRenderChildren: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
   onRenderMenuIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onMenuClickHandler = this.onMenuClickHandler.bind(this);

libs/fabric/src/lib/components/button/command-bar-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }

libs/fabric/src/lib/components/button/compound-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabCompoundButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }

libs/fabric/src/lib/components/button/default-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabDefaultButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }

libs/fabric/src/lib/components/button/icon-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabIconButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }

libs/fabric/src/lib/components/button/messagebar-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }

libs/fabric/src/lib/components/button/primary-button.component.ts

@@ -1,7 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -57,7 +65,7 @@ export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, ngZone);
   }
 }