From 47ca4767670f6e449865e845a203dfc715b95be0 Mon Sep 17 00:00:00 2001
From: Ben Grynhaus <bengr@microsoft.com>
Date: Fri, 19 Oct 2018 01:17:59 +0300
Subject: [PATCH] Fix breaking API change in ReactWrapperComponent in Fabric

---
 .../breadcrumb/breadcrumb.component.ts        | 14 +++++++---
 .../button/action-button.component.ts         | 14 +++++++---
 .../button/base-button.component.ts           |  6 ++---
 .../button/command-bar-button.component.ts    | 14 +++++++---
 .../button/compound-button.component.ts       | 14 +++++++---
 .../button/default-button.component.ts        | 14 +++++++---
 .../button/icon-button.component.ts           | 14 +++++++---
 .../button/messagebar-button.component.ts     | 14 +++++++---
 .../button/primary-button.component.ts        | 14 +++++++---
 .../button/split-button.component.ts          | 14 +++++++---
 .../components/checkbox/checkbox.component.ts | 18 ++++++++++---
 .../combo-box/base-combo-box.component.ts     |  6 ++---
 .../combo-box/combo-box.component.ts          | 14 +++++++---
 .../virtualized-combo-box.component.ts        | 14 +++++++---
 .../command-bar/command-bar.component.ts      |  5 ++--
 .../command-bar-items.directives.ts           | 14 +++++-----
 .../grouped-list/grouped-list.component.ts    | 18 ++++++++++---
 .../hover-card/hover-card.component.ts        | 17 +++++++++---
 .../src/lib/components/icon/icon.component.ts | 12 +++++++--
 .../message-bar/message-bar.component.ts      | 18 ++++++++++---
 .../lib/components/panel/panel.component.ts   |  5 ++--
 .../components/persona/persona.component.ts   | 26 +++++++++++++++----
 .../base-picker/base-picker.component.ts      | 13 +++++++---
 .../tag-picker/tag-picker.component.ts        | 14 +++++++---
 .../lib/components/pivot/pivot.component.ts   | 22 +++++++++++++---
 .../search-box/search-box.component.ts        |  5 ++--
 .../components/shimmer/shimmer.component.ts   | 17 +++++++++---
 .../tooltip/tooltip-host.component.ts         | 17 +++++++++---
 28 files changed, 298 insertions(+), 89 deletions(-)

diff --git a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
index 4c74495..c5142f2 100644
--- a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
+++ b/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({
@@ -22,8 +31,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
       [styles]="styles"
       [theme]="theme"
       [RenderItem]="renderItem && onRenderItem"
-      [ReduceData]="onReduceData"
-      >
+      [ReduceData]="onReduceData">
     </Breadcrumb>
   `,
   styles: ['react-renderer'],
diff --git a/libs/fabric/src/lib/components/button/action-button.component.ts b/libs/fabric/src/lib/components/button/action-button.component.ts
index d55ad5e..ed8802b 100644
--- a/libs/fabric/src/lib/components/button/action-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/base-button.component.ts b/libs/fabric/src/lib/components/button/base-button.component.ts
index e845994..2805f4c 100644
--- a/libs/fabric/src/lib/components/button/base-button.component.ts
+++ b/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, 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);
diff --git a/libs/fabric/src/lib/components/button/command-bar-button.component.ts b/libs/fabric/src/lib/components/button/command-bar-button.component.ts
index 98bdfb5..c2fb0d7 100644
--- a/libs/fabric/src/lib/components/button/command-bar-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/compound-button.component.ts b/libs/fabric/src/lib/components/button/compound-button.component.ts
index 0c14018..bf90c9e 100644
--- a/libs/fabric/src/lib/components/button/compound-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/default-button.component.ts b/libs/fabric/src/lib/components/button/default-button.component.ts
index bebf589..40f9194 100644
--- a/libs/fabric/src/lib/components/button/default-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/icon-button.component.ts b/libs/fabric/src/lib/components/button/icon-button.component.ts
index 104dfa4..e48c5f6 100644
--- a/libs/fabric/src/lib/components/button/icon-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/messagebar-button.component.ts b/libs/fabric/src/lib/components/button/messagebar-button.component.ts
index 5ea20d0..6bb2a22 100644
--- a/libs/fabric/src/lib/components/button/messagebar-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/primary-button.component.ts b/libs/fabric/src/lib/components/button/primary-button.component.ts
index b4ef2d2..0db6cd2 100644
--- a/libs/fabric/src/lib/components/button/primary-button.component.ts
+++ b/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);
   }
 }
diff --git a/libs/fabric/src/lib/components/button/split-button.component.ts b/libs/fabric/src/lib/components/button/split-button.component.ts
index cf22d6b..b65c584 100644
--- a/libs/fabric/src/lib/components/button/split-button.component.ts
+++ b/libs/fabric/src/lib/components/button/split-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 FabSplitButtonComponent 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);
   }
 }
diff --git a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
index f824fc5..ab19296 100644
--- a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
+++ b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
@@ -2,7 +2,19 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { ICheckboxProps } from 'office-ui-fabric-react/lib/Checkbox';
 import { FormEvent } from 'react';
 
@@ -88,8 +100,8 @@ export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps>
 
   onRenderLabel: (props?: ICheckboxProps, defaultRender?: JsxRenderFunc<ICheckboxProps>) => JSX.Element;
 
-  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 });
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onChangeHandler = this.onChangeHandler.bind(this);
diff --git a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts
index 418f77c..f48c098 100644
--- a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts
+++ b/libs/fabric/src/lib/components/combo-box/base-combo-box.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 { IComboBox, IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox';
 
 export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit {
@@ -64,8 +64,8 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
 
   onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element;
 
-  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 });
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onChangeHandler = this.onChangeHandler.bind(this);
diff --git a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/combo-box.component.ts
index 401c599..e9ea7d8 100644
--- a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts
+++ b/libs/fabric/src/lib/components/combo-box/combo-box.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 { FabBaseComboBoxComponent } from './base-combo-box.component';
 
 @Component({
@@ -43,7 +51,7 @@ export class FabComboBoxComponent extends FabBaseComboBoxComponent {
   @ViewChild('reactNode')
   protected 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);
   }
 }
diff --git a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts
index a91ee3d..fe2d444 100644
--- a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts
+++ b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.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 { FabBaseComboBoxComponent } from './base-combo-box.component';
 
 @Component({
@@ -43,7 +51,7 @@ export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
   @ViewChild('reactNode')
   protected 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);
   }
 }
diff --git a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts
index ec4f364..fd63ea0 100644
--- a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts
+++ b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts
@@ -11,6 +11,7 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnDestroy,
   Output,
   QueryList,
@@ -114,8 +115,8 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
 
   private readonly _subscriptions: Subscription[] = [];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
   }
 
   ngOnChanges(changes: TypedChanges<this>) {
diff --git a/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts b/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts
index af64b66..d699b62 100644
--- a/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts
+++ b/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts
@@ -2,17 +2,17 @@
 // Licensed under the MIT License.
 
 import {
-  Directive,
-  ContentChildren,
-  QueryList,
-  OnDestroy,
   AfterContentInit,
-  Output,
+  ContentChildren,
+  Directive,
   EventEmitter,
+  OnDestroy,
+  Output,
+  QueryList,
 } from '@angular/core';
-import { ICommandBarItemOptions } from '../command-bar.component';
 import { Subscription } from 'rxjs';
-import { CommandBarItemDirective, CommandBarItemChangedPayload } from './command-bar-item.directives';
+import { ICommandBarItemOptions } from '../command-bar.component';
+import { CommandBarItemChangedPayload, CommandBarItemDirective } from './command-bar-item.directives';
 
 export abstract class CommandBarItemsDirectiveBase implements AfterContentInit, OnDestroy {
   private readonly _subscriptions: Subscription[] = [];
diff --git a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts
index 1ab6caa..ed1f6f0 100644
--- a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts
+++ b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts
@@ -2,7 +2,19 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList';
 import { IListProps } from 'office-ui-fabric-react/lib/List';
 
@@ -75,8 +87,8 @@ export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListP
 
   private _renderCell: JsxRenderFunc<ICellRenderContext>;
 
-  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 });
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onRenderCell = this.onRenderCell.bind(this);
diff --git a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts
index b913589..d038124 100644
--- a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts
+++ b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts
@@ -2,7 +2,18 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IExpandingCardProps, IHoverCardProps } from 'office-ui-fabric-react/lib/HoverCard';
 import { omit } from '../../utils/omit';
 
@@ -84,8 +95,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
   transformedExpandingCardProps: IExpandingCardProps;
   private _expandingCardOptions: IExpandingCardOptions;
 
-  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 });
   }
 
   private _transformExpandingCardOptionsToProps(options: IExpandingCardOptions): IExpandingCardProps {
diff --git a/libs/fabric/src/lib/components/icon/icon.component.ts b/libs/fabric/src/lib/components/icon/icon.component.ts
index 16e8a31..3554cd9 100644
--- a/libs/fabric/src/lib/components/icon/icon.component.ts
+++ b/libs/fabric/src/lib/components/icon/icon.component.ts
@@ -2,7 +2,15 @@
 // Licensed under the MIT License.
 
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 
 @Component({
@@ -43,6 +51,6 @@ export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
   styles?: IIconProps['styles'];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 }
diff --git a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts
index 34939fd..5c98bc8 100644
--- a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts
+++ b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts
@@ -2,7 +2,19 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
 
 @Component({
@@ -66,8 +78,8 @@ export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarPro
 
   actions: JSX.Element;
 
-  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 });
   }
 
   ngOnInit() {
diff --git a/libs/fabric/src/lib/components/panel/panel.component.ts b/libs/fabric/src/lib/components/panel/panel.component.ts
index 9c63632..0b0a350 100644
--- a/libs/fabric/src/lib/components/panel/panel.component.ts
+++ b/libs/fabric/src/lib/components/panel/panel.component.ts
@@ -9,6 +9,7 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnInit,
   Output,
   Renderer2,
@@ -131,8 +132,8 @@ export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implem
   onRenderFooter: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
   onRenderFooterContent: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;
 
-  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 });
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onRenderHeader = this.onRenderHeader.bind(this);
diff --git a/libs/fabric/src/lib/components/persona/persona.component.ts b/libs/fabric/src/lib/components/persona/persona.component.ts
index 4229a81..6db5031 100644
--- a/libs/fabric/src/lib/components/persona/persona.component.ts
+++ b/libs/fabric/src/lib/components/persona/persona.component.ts
@@ -2,7 +2,19 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { ImageLoadState } from 'office-ui-fabric-react/lib/components/Image/Image.types';
 import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from 'office-ui-fabric-react/lib/Persona';
 
@@ -56,6 +68,10 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
   onRenderCoin: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc<IPersonaSharedProps>) => JSX.Element;
   onRenderInitials: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc<IPersonaSharedProps>) => JSX.Element;
 
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone });
+  }
+
   ngOnInit() {
     this.onRenderCoin = this.createRenderPropHandler(this.renderCoin);
     this.onRenderInitials = this.createRenderPropHandler(this.renderInitials);
@@ -129,8 +145,8 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
   onRenderTertiaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc<IPersonaProps>) => JSX.Element;
   onRenderOptionalText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc<IPersonaProps>) => JSX.Element;
 
-  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);
   }
 
   ngOnInit() {
@@ -189,7 +205,7 @@ export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoi
   @Input()
   className?: IPersonaCoinProps['className'];
 
-  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);
   }
 }
diff --git a/libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts b/libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts
index 63baf75..5b1d5ca 100644
--- a/libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts
+++ b/libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts
@@ -2,9 +2,14 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, Omit, 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 { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
-import { BaseAutoFill, IBasePickerProps, IBasePickerSuggestionsProps, IPickerItemProps } from 'office-ui-fabric-react/lib/Pickers';
+import {
+  BaseAutoFill,
+  IBasePickerProps,
+  IBasePickerSuggestionsProps,
+  IPickerItemProps,
+} from 'office-ui-fabric-react/lib/Pickers';
 import omit from '../../../utils/omit';
 
 export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>>
@@ -87,8 +92,8 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
 
   private _pickerSuggestionsOptions: IBasePickerSuggestionsOptions;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
 
     this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onFocusHandler = this.onFocusHandler.bind(this);
diff --git a/libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.component.ts b/libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.component.ts
index 8e4195e..739567c 100644
--- a/libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.component.ts
+++ b/libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.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 { ITag, ITagPickerProps } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker';
 import { FabBasePickerComponent } from '../base-picker/base-picker.component';
 
@@ -50,7 +58,7 @@ export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPick
   @ViewChild('reactNode')
   protected 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);
   }
 }
diff --git a/libs/fabric/src/lib/components/pivot/pivot.component.ts b/libs/fabric/src/lib/components/pivot/pivot.component.ts
index 6e0dad7..8f2567c 100644
--- a/libs/fabric/src/lib/components/pivot/pivot.component.ts
+++ b/libs/fabric/src/lib/components/pivot/pivot.component.ts
@@ -2,7 +2,21 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, passProp, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnInit,
+  Output,
+  QueryList,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 import * as React from 'react';
 
@@ -69,8 +83,8 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
 
   onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
   }
 
   ngOnInit() {
@@ -145,7 +159,7 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
   readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
 
     this.onLinkClickHandler = this.onLinkClickHandler.bind(this);
   }
diff --git a/libs/fabric/src/lib/components/search-box/search-box.component.ts b/libs/fabric/src/lib/components/search-box/search-box.component.ts
index f50c484..4641d28 100644
--- a/libs/fabric/src/lib/components/search-box/search-box.component.ts
+++ b/libs/fabric/src/lib/components/search-box/search-box.component.ts
@@ -9,6 +9,7 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   Output,
   Renderer2,
   ViewChild,
@@ -94,8 +95,8 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
 
   private _clearButtonOptions: IButtonOptions;
 
-  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 });
 
     this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onSearchHandler = this.onSearchHandler.bind(this);
diff --git a/libs/fabric/src/lib/components/shimmer/shimmer.component.ts b/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
index fe1b01d..386c539 100644
--- a/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
+++ b/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
@@ -2,7 +2,16 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  NgZone,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IShimmerElementsGroupProps } from 'office-ui-fabric-react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types';
 import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
 
@@ -65,8 +74,8 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
 
   private _renderCustomElementsGroup?: InputRendererOptions<{}>;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
   }
 }
 
@@ -109,6 +118,6 @@ export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShi
   styles?: IShimmerElementsGroupProps['styles'];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 }
diff --git a/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts b/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
index 38c8622..2d5adac 100644
--- a/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
+++ b/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
@@ -2,7 +2,18 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { ITooltipHostProps, ITooltipProps } from 'office-ui-fabric-react/lib/Tooltip';
 import { omit } from '../../utils/omit';
 
@@ -74,8 +85,8 @@ export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostP
   transformedTooltipProps: ITooltipHostProps['tooltipProps'];
   private _tooltipOptions: ITooltipOptions;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
 
     this.onTooltipToggleHandler = this.onTooltipToggleHandler.bind(this);
   }