diff --git a/apps/demo/src/app/counter/counter.component.ts b/apps/demo/src/app/counter/counter.component.ts
index 15037dcc..ac611c55 100644
--- a/apps/demo/src/app/counter/counter.component.ts
+++ b/apps/demo/src/app/counter/counter.component.ts
@@ -1,10 +1,9 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 
 @Component({
   selector: 'counter',
   template: `
-    <div>{{ count }}</div>
-    <button (click)="onClick()">+</button>
+    <fab-default-button [text]="count + '+'" (onClick)="onClick()"></fab-default-button>
     `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/libs/core/package.json b/libs/core/package.json
index 26b8a2b1..fd83f5f2 100644
--- a/libs/core/package.json
+++ b/libs/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/core",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "ngPackage": {
     "deleteDestPath": true,
     "whitelistedNonPeerDependencies": [
diff --git a/libs/core/src/lib/components/wrapper-component.ts b/libs/core/src/lib/components/wrapper-component.ts
index 8113e2be..bac865ef 100644
--- a/libs/core/src/lib/components/wrapper-component.ts
+++ b/libs/core/src/lib/components/wrapper-component.ts
@@ -1,20 +1,10 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  ComponentFactoryResolver,
-  ComponentRef,
-  ElementRef,
-  Injector,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  TemplateRef,
-  Type,
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, Input, OnChanges, Renderer2, SimpleChanges, TemplateRef, Type } from '@angular/core';
 import toStyle from 'css-to-style';
 import { ReactContentProps } from '../renderer/react-content';
 import { isReactNode } from '../renderer/react-node';
+import { isReactRendererData } from '../renderer/renderer';
 import { renderComponent, renderFunc, renderTemplate } from '../renderer/renderprop-helpers';
+import { afterRenderFinished } from '../utils/render/render-delay';
 import { unreachable } from '../utils/types/unreachable';
 
 // Forbidden attributes are still ignored, since they may be set from the wrapper components themselves (forbidden is only applied for users of the wrapper components)
@@ -93,6 +83,7 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   constructor(
     public readonly elementRef: ElementRef,
     private readonly changeDetectorRef: ChangeDetectorRef,
+    private readonly renderer: Renderer2,
     private readonly setHostDisplay: boolean = false
   ) {}
 
@@ -102,6 +93,19 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     if (this.setHostDisplay) {
       this._setHostDisplay();
     }
+
+    // NOTE: Workaround/fix for Issue #5 (https://github.com/Microsoft/angular-react/issues/5).
+    // The wrapper component isn't added to the root react nodes list when it's inside a `ReactContent` node, we manually add it (note that the root nodes list is a `Set`, so it won't duplicate nodes if already exist).
+    // There's potentially a better solution instead of this
+    const rendererData = this.renderer.data;
+    if (isReactRendererData(rendererData)) {
+      afterRenderFinished(() => {
+        const nativeElement = this.reactNodeRef.nativeElement;
+        if (isReactNode(nativeElement)) {
+          rendererData.addRootNode(nativeElement);
+        }
+      });
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -165,10 +169,14 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
    */
   protected createRenderPropHandler<TProps extends object>(
     renderInputValue: InputRendererOptions<TProps>,
-    jsxRenderer?: JsxRenderFunc<TProps>,
-    additionalProps?: ReactContentProps
+    options?: {
+      jsxRenderer?: JsxRenderFunc<TProps>;
+      additionalProps?: ReactContentProps;
+    }
   ): (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => JSX.Element | null {
-    const renderer = jsxRenderer || this.createInputJsxRenderer(renderInputValue, additionalProps);
+    const renderer =
+      (options && options.jsxRenderer) ||
+      this.createInputJsxRenderer(renderInputValue, options && options.additionalProps);
 
     return (props?: TProps, defaultRender?: JsxRenderFunc<TProps>) => {
       if (!renderInputValue) {
diff --git a/libs/core/src/lib/renderer/renderer.ts b/libs/core/src/lib/renderer/renderer.ts
index 6e466a6a..11d3fa15 100644
--- a/libs/core/src/lib/renderer/renderer.ts
+++ b/libs/core/src/lib/renderer/renderer.ts
@@ -16,7 +16,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
   // React elements cannot be "inserted" and later have their props
   // updated, so the "insert", or React.Render, can only be done once the
   // element has been fully defined.  Only the topmost [root] nodes are added here.
-  public reactRootNodes: Array<ReactNode> = [];
+  public reactRootNodes: Set<ReactNode> = new Set();
 
   private isRenderPending: boolean;
   // This flag can only be set to true from outside.  It can only be reset
@@ -56,29 +56,39 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
     // are ReadOnly.
 
     // Workaround for ReactNodes inside ReactContent being added to the root of the VDOM and not removed from the VDOM when unmounted from the DOM.
-    for (let i = 0; i < this.reactRootNodes.length; i++) {
-      const node = this.reactRootNodes[i];
+    this.reactRootNodes.forEach(node => {
       if (
         !isReactNode(node.parent) &&
         !document.body.contains(node.parent) &&
         ReactDOM.unmountComponentAtNode(node.parent)
       ) {
-        this.reactRootNodes.splice(i--, 1);
+        this.reactRootNodes.delete(node);
       }
-    }
+    });
 
     if (this.isRenderPending) {
       // Remove root nodes that are pending destroy after render.
-      this.reactRootNodes = this.reactRootNodes.filter(node => !node.render().destroyPending);
+      this.reactRootNodes = new Set(Array.from(this.reactRootNodes).filter(node => !node.render().destroyPending));
       this.isRenderPending = false;
     }
   }
 }
 
-class ReactRenderer implements Renderer2 {
-  readonly data: StringMap<any> = Object.create(null);
+export const isReactRendererData = (data: StringMap): data is ReactRendererData =>
+  data && typeof (data as ReactRendererData).addRootNode === 'function';
+
+export interface ReactRendererData {
+  readonly addRootNode: (node: ReactNode) => void;
+}
+
+export class ReactRenderer implements Renderer2 {
+  readonly data: ReactRendererData = {
+    addRootNode: (node: ReactNode) => {
+      this.rootRenderer.reactRootNodes.add(node);
+    },
+  };
 
-  constructor(private rootRenderer: AngularReactRendererFactory) {}
+  constructor(public readonly rootRenderer: AngularReactRendererFactory) {}
 
   destroy(): void {}
 
@@ -128,7 +138,8 @@ class ReactRenderer implements Renderer2 {
         console.warn('Renderer > appendChild > asDOM > parent:', parent.toString(), 'node:', node.toString());
       }
       node.setRenderPendingCallback = this.rootRenderer.setRenderPendingCallback;
-      this.rootRenderer.reactRootNodes.push(node);
+
+      this.rootRenderer.reactRootNodes.add(node);
       node.parent = parent;
       return;
     }
diff --git a/libs/core/src/lib/utils/render/render-delay.ts b/libs/core/src/lib/utils/render/render-delay.ts
new file mode 100644
index 00000000..6b831edd
--- /dev/null
+++ b/libs/core/src/lib/utils/render/render-delay.ts
@@ -0,0 +1,3 @@
+export const afterRenderFinished = (callback: Function) => {
+  setTimeout(callback, 0);
+};
diff --git a/libs/fabric/package.json b/libs/fabric/package.json
index aba167a0..bf6a4b38 100644
--- a/libs/fabric/package.json
+++ b/libs/fabric/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/fabric",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "ngPackage": {
     "lib": {
       "entryFile": "public-api.ts",
@@ -70,7 +70,7 @@
   ],
   "private": false,
   "peerDependencies": {
-    "@angular-react/core": "^0.3.0",
+    "@angular-react/core": "^0.4.0",
     "@angular/common": "^6.1.0",
     "@angular/core": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
diff --git a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
index cd6df845..c73f4323 100644
--- a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
+++ b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
@@ -1,13 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-  ViewChild,
-  ChangeDetectorRef,
-} 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({
@@ -66,8 +58,8 @@ export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbPro
 
   onRenderItem: (props?: IBreadcrumbItem, defaultRender?: JsxRenderFunc<IBreadcrumbItem>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 
   ngOnInit() {
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 cc3f1f3c..2c0fe0f8 100644
--- a/libs/fabric/src/lib/components/button/action-button.component.ts
+++ b/libs/fabric/src/lib/components/button/action-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabActionButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 dd696046..593ff717 100644
--- a/libs/fabric/src/lib/components/button/base-button.component.ts
+++ b/libs/fabric/src/lib/components/button/base-button.component.ts
@@ -1,5 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit {
@@ -87,8 +87,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) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, 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 18f021e8..b73f8e76 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,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 f73fb389..d759b98e 100644
--- a/libs/fabric/src/lib/components/button/compound-button.component.ts
+++ b/libs/fabric/src/lib/components/button/compound-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabCompoundButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 423f7e8e..da3c0a54 100644
--- a/libs/fabric/src/lib/components/button/default-button.component.ts
+++ b/libs/fabric/src/lib/components/button/default-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabDefaultButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 995b1a07..7ee4872d 100644
--- a/libs/fabric/src/lib/components/button/icon-button.component.ts
+++ b/libs/fabric/src/lib/components/button/icon-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabIconButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 683dc2ca..6552b949 100644
--- a/libs/fabric/src/lib/components/button/messagebar-button.component.ts
+++ b/libs/fabric/src/lib/components/button/messagebar-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 2e0b3628..a4ea65b1 100644
--- a/libs/fabric/src/lib/components/button/primary-button.component.ts
+++ b/libs/fabric/src/lib/components/button/primary-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 78de32f0..45c2b256 100644
--- a/libs/fabric/src/lib/components/button/split-button.component.ts
+++ b/libs/fabric/src/lib/components/button/split-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 
 @Component({
@@ -54,7 +54,7 @@ export class FabSplitButtonComponent extends FabBaseButtonComponent {
   @ViewChild('reactNode')
   reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/callout/callout.component.ts b/libs/fabric/src/lib/components/callout/callout.component.ts
index 37d225d8..1d19de91 100644
--- a/libs/fabric/src/lib/components/callout/callout.component.ts
+++ b/libs/fabric/src/lib/components/callout/callout.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
 import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning/positioning.types';
 
@@ -126,7 +117,7 @@ export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
   @Output()
   readonly onScroll = new EventEmitter<void>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
index df7ae7c1..d87b4a43 100644
--- a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
+++ b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts
@@ -1,15 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
 import { ICheckboxProps } from 'office-ui-fabric-react/lib/Checkbox';
 import { FormEvent } from 'react';
 
@@ -95,8 +85,8 @@ export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps>
 
   onRenderLabel: (props?: ICheckboxProps, defaultRender?: JsxRenderFunc<ICheckboxProps>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     // 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/choice-group/choice-group.component.ts b/libs/fabric/src/lib/components/choice-group/choice-group.component.ts
index 328ca497..bea08a1c 100644
--- a/libs/fabric/src/lib/components/choice-group/choice-group.component.ts
+++ b/libs/fabric/src/lib/components/choice-group/choice-group.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/lib/ChoiceGroup';
 
 @Component({
@@ -61,8 +52,8 @@ export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupP
   @Output()
   readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     this.onChangedHandler = this.onChangedHandler.bind(this);
     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 16ec138b..c340a903 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
@@ -1,5 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ElementRef, EventEmitter, Input, OnInit, Output, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
 import { IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox';
 
 export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit {
@@ -61,8 +61,8 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
 
   onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     // coming from React context - we need to bind to this so we can access the Angular Component properties
     this.onChangedHandler = this.onChangedHandler.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 50593e00..604f6b61 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,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseComboBoxComponent } from './base-combo-box.component';
 
 @Component({
@@ -40,7 +40,7 @@ export class FabComboBoxComponent extends FabBaseComboBoxComponent {
   @ViewChild('reactNode')
   protected reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 f690803a..b339fd18 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,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseComboBoxComponent } from './base-combo-box.component';
 
 @Component({
@@ -40,7 +40,7 @@ export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
   @ViewChild('reactNode')
   protected reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 0a90bd22..97423dd9 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
@@ -1,5 +1,5 @@
 import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnDestroy, Output, QueryList, ViewChild } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnDestroy, Output, QueryList, Renderer2, ViewChild } from '@angular/core';
 import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar';
 import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { Subscription } from 'rxjs';
@@ -92,8 +92,8 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
 
   private readonly _subscriptions: Subscription[] = [];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, true);
   }
 
   ngOnChanges(changes: TypedChanges<this>) {
diff --git a/libs/fabric/src/lib/components/date-picker/date-picker.component.ts b/libs/fabric/src/lib/components/date-picker/date-picker.component.ts
index 4f9acb35..7588aaf1 100644
--- a/libs/fabric/src/lib/components/date-picker/date-picker.component.ts
+++ b/libs/fabric/src/lib/components/date-picker/date-picker.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IDatePickerProps } from 'office-ui-fabric-react/lib/DatePicker';
 
 @Component({
@@ -121,8 +112,8 @@ export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerPro
   @Output()
   readonly onAfterMenuDismiss = new EventEmitter<void>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     this.onSelectDateHandler = this.onSelectDateHandler.bind(this);
   }
diff --git a/libs/fabric/src/lib/components/dialog/dialog.component.ts b/libs/fabric/src/lib/components/dialog/dialog.component.ts
index 7ba3176e..3aa40cd3 100644
--- a/libs/fabric/src/lib/components/dialog/dialog.component.ts
+++ b/libs/fabric/src/lib/components/dialog/dialog.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
 
 @Component({
@@ -71,8 +62,8 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
   @Output()
   readonly onDismiss = new EventEmitter<MouseEvent>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     this.onDismissHandler = this.onDismissHandler.bind(this);
   }
@@ -111,8 +102,8 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
   @Input()
   className?: IDialogFooterProps['className'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
 
@@ -179,7 +170,7 @@ export class FabDialogContentComponent extends ReactWrapperComponent<IDialogCont
   @Output()
   readonly onDismiss = new EventEmitter<MouseEvent>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/divider/divider.component.ts b/libs/fabric/src/lib/components/divider/divider.component.ts
index 058fb7e1..0a587c4c 100644
--- a/libs/fabric/src/lib/components/divider/divider.component.ts
+++ b/libs/fabric/src/lib/components/divider/divider.component.ts
@@ -1,5 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
 import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider';
 
 @Component({
@@ -21,7 +21,7 @@ export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerP
   @Input()
   getClassNames?: IVerticalDividerProps['getClassNames'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/fabric/fabric.component.ts b/libs/fabric/src/lib/components/fabric/fabric.component.ts
index 4948b458..2db061bb 100644
--- a/libs/fabric/src/lib/components/fabric/fabric.component.ts
+++ b/libs/fabric/src/lib/components/fabric/fabric.component.ts
@@ -1,5 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
 import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
 
 @Component({
@@ -25,7 +25,7 @@ export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
   @Input()
   theme?: IFabricProps['theme'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 f8bdc12d..b4982005 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
@@ -1,15 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, 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';
 
@@ -82,8 +72,8 @@ export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListP
 
   private _renderCell: JsxRenderFunc<ICellRenderContext>;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     // 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 2ca82264..ad9aee22 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
@@ -1,14 +1,5 @@
 import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IExpandingCardProps, IHoverCardProps } from 'office-ui-fabric-react/lib/HoverCard';
 import { omit } from '../../utils/omit';
 
@@ -90,8 +81,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
   transformedExpandingCardProps: IExpandingCardProps;
   private _expandingCardOptions: IExpandingCardOptions;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 
   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 ef35cf10..fce01001 100644
--- a/libs/fabric/src/lib/components/icon/icon.component.ts
+++ b/libs/fabric/src/lib/components/icon/icon.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 import { ReactWrapperComponent } from '@angular-react/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
+import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 
 @Component({
   selector: 'fab-icon',
@@ -39,7 +39,7 @@ export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
   @Input()
   styles?: IIconProps['styles'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, true);
   }
 }
diff --git a/libs/fabric/src/lib/components/image/image.component.ts b/libs/fabric/src/lib/components/image/image.component.ts
index 391714b0..e89c28e1 100644
--- a/libs/fabric/src/lib/components/image/image.component.ts
+++ b/libs/fabric/src/lib/components/image/image.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
 
 @Component({
@@ -85,7 +76,7 @@ export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
   @ViewChild('reactNode')
   protected reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/link/link.component.ts b/libs/fabric/src/lib/components/link/link.component.ts
index 92f01286..df8e6ba2 100644
--- a/libs/fabric/src/lib/components/link/link.component.ts
+++ b/libs/fabric/src/lib/components/link/link.component.ts
@@ -1,5 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
 import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
 
 @Component({
@@ -91,7 +91,7 @@ export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
   @Input()
   keytipProps?: ILinkProps['keytipProps'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 35cc5c6c..e6f2f2ad 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
@@ -1,17 +1,6 @@
-import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  OnInit,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
 import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
-import { BaseButton, Button } from 'office-ui-fabric-react/lib/Button';
 
 @Component({
   selector: 'fab-message-bar',
@@ -74,8 +63,8 @@ export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarPro
 
   actions: JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 
   ngOnInit() {
diff --git a/libs/fabric/src/lib/components/modal/modal.component.ts b/libs/fabric/src/lib/components/modal/modal.component.ts
index 820fd0e9..f5e19218 100644
--- a/libs/fabric/src/lib/components/modal/modal.component.ts
+++ b/libs/fabric/src/lib/components/modal/modal.component.ts
@@ -1,16 +1,7 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  ViewChild,
-  EventEmitter,
-  ChangeDetectorRef,
-  Output,
-} from '@angular/core';
-import { IModalProps } from 'office-ui-fabric-react/lib/Modal';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IAccessiblePopupProps } from 'office-ui-fabric-react/lib/common/IAccessiblePopupProps';
+import { IModalProps } from 'office-ui-fabric-react/lib/Modal';
 import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
 
 @Component({
@@ -91,8 +82,8 @@ export class FabModalComponent extends ReactWrapperComponent<IModalProps>
   @Output()
   readonly onDismissed = new EventEmitter<void>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     this.onDismissHandler = this.onDismissHandler.bind(this);
   }
diff --git a/libs/fabric/src/lib/components/panel/panel.component.ts b/libs/fabric/src/lib/components/panel/panel.component.ts
index b176ba66..3e72477a 100644
--- a/libs/fabric/src/lib/components/panel/panel.component.ts
+++ b/libs/fabric/src/lib/components/panel/panel.component.ts
@@ -1,15 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
 import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Panel';
 
 @Component({
@@ -121,8 +111,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) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     // 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 bb7e7115..01c6f990 100644
--- a/libs/fabric/src/lib/components/persona/persona.component.ts
+++ b/libs/fabric/src/lib/components/persona/persona.component.ts
@@ -1,15 +1,5 @@
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, 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';
 
@@ -136,8 +126,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) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 
   ngOnInit() {
@@ -196,7 +186,7 @@ export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoi
   @Input()
   className?: IPersonaCoinProps['className'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 9bb8abef..2aa2f5e7 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
@@ -1,12 +1,7 @@
 import { InputRendererOptions, JsxRenderFunc, Omit, ReactWrapperComponent } from '@angular-react/core';
 import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output } 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>>
@@ -89,7 +84,7 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
 
   private _pickerSuggestionsOptions: IBasePickerSuggestionsOptions;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
     super(elementRef, changeDetectorRef, true);
 
     this.onChangeHandler = this.onChangeHandler.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 8f36af09..aca0b1f3 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,14 +1,5 @@
-import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  ViewChild,
-  OnInit,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { ITagPickerProps, ITag } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, 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';
 
 @Component({
@@ -56,7 +47,7 @@ export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPick
   @ViewChild('reactNode')
   protected reactNodeRef: ElementRef;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/pivot/pivot.component.ts b/libs/fabric/src/lib/components/pivot/pivot.component.ts
index c1b02105..efe60da1 100644
--- a/libs/fabric/src/lib/components/pivot/pivot.component.ts
+++ b/libs/fabric/src/lib/components/pivot/pivot.component.ts
@@ -1,17 +1,5 @@
-import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent, passProp } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  QueryList,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+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 { IPivotItemProps, IPivotProps, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 import * as React from 'react';
 
@@ -78,8 +66,8 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
 
   onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, true);
   }
 
   ngOnInit() {
@@ -153,8 +141,8 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
   @Output()
   readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, 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 1656cef8..863c8b97 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
@@ -1,14 +1,5 @@
 import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox';
 import omit from '../../utils/omit';
@@ -86,8 +77,8 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
 
   private _clearButtonOptions: IButtonOptions;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
 
     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 debd5867..32b933ec 100644
--- a/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
+++ b/libs/fabric/src/lib/components/shimmer/shimmer.component.ts
@@ -1,15 +1,7 @@
-import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  ViewChild,
-  OnInit,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
+import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, 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';
 
 @Component({
   selector: 'fab-shimmer',
@@ -70,8 +62,8 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
 
   private _renderCustomElementsGroup?: InputRendererOptions<{}>;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, true);
   }
 }
 
@@ -113,7 +105,7 @@ export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShi
   @Input()
   styles?: IShimmerElementsGroupProps['styles'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, true);
   }
 }
diff --git a/libs/fabric/src/lib/components/slider/slider.component.ts b/libs/fabric/src/lib/components/slider/slider.component.ts
index 9d1067ac..215b5a48 100644
--- a/libs/fabric/src/lib/components/slider/slider.component.ts
+++ b/libs/fabric/src/lib/components/slider/slider.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  ViewChild,
-  Output,
-  EventEmitter,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { ISliderProps } from 'office-ui-fabric-react/lib/Slider';
 
 @Component({
@@ -79,7 +70,7 @@ export class FabSliderComponent extends ReactWrapperComponent<ISliderProps> {
   @Output()
   readonly onChange = new EventEmitter<number>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/spinner/spinner.component.ts b/libs/fabric/src/lib/components/spinner/spinner.component.ts
index ca4e6b84..c957db81 100644
--- a/libs/fabric/src/lib/components/spinner/spinner.component.ts
+++ b/libs/fabric/src/lib/components/spinner/spinner.component.ts
@@ -1,5 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
 import { ISpinnerProps } from 'office-ui-fabric-react/lib/Spinner';
 
 @Component({
@@ -45,7 +45,7 @@ export class FabSpinnerComponent extends ReactWrapperComponent<ISpinnerProps> {
   @Input()
   styles?: ISpinnerProps['styles'];
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
diff --git a/libs/fabric/src/lib/components/toggle/toggle.component.ts b/libs/fabric/src/lib/components/toggle/toggle.component.ts
index dbf9ef7b..5d643cb4 100644
--- a/libs/fabric/src/lib/components/toggle/toggle.component.ts
+++ b/libs/fabric/src/lib/components/toggle/toggle.component.ts
@@ -1,14 +1,5 @@
 import { ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { IToggleProps } from 'office-ui-fabric-react/lib/Toggle';
 
 @Component({
@@ -79,7 +70,7 @@ export class FabToggleComponent extends ReactWrapperComponent<IToggleProps> {
   @Output()
   readonly onChanged = new EventEmitter<boolean>();
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
   }
 }
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 a71f02c7..4d6701e1 100644
--- a/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
+++ b/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts
@@ -1,14 +1,5 @@
 import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { ITooltipHostProps, ITooltipProps } from 'office-ui-fabric-react/lib/Tooltip';
 import { omit } from '../../utils/omit';
 
@@ -80,8 +71,8 @@ export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostP
   transformedTooltipProps: ITooltipHostProps['tooltipProps'];
   private _tooltipOptions: ITooltipOptions;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
-    super(elementRef, changeDetectorRef, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, true);
 
     this.onTooltipToggleHandler = this.onTooltipToggleHandler.bind(this);
   }