5.0.0-alpha

apps/docs/src/app/react-components/react-dot/react-dot.component.ts

@@ -14,7 +14,9 @@ import {
 } from '@angular/core';
 import * as React from 'react';
 import { ReactWrapperComponent } from '@angular-react/core';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Component({
   selector: 'app-react-dot',
   template: `
@@ -38,7 +40,6 @@ import { ReactWrapperComponent } from '@angular-react/core';
     </ReactDot>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: ['react-renderer { display: none; }'],
 })
 export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

libs/core/src/lib/declarations/interfaces.ts

@@ -0,0 +1 @@
+export type AngularReactMetadata = unknown;

libs/core/src/lib/declarations/public-api.ts

@@ -5,3 +5,4 @@ export * from './known-keys';
 export * from './many';
 export * from './omit';
 export * from './string-map';
+export * from './interfaces';

libs/core/src/lib/decorators/angular-react.ts

@@ -0,0 +1,19 @@
+import { Type, ɵNG_COMP_DEF, ɵComponentDef } from '@angular/core'
+import { AngularReactMetadata } from '../declarations/interfaces';
+import { setAngularReactMetadata } from '../utils/angular-react/metadata';
+
+export function AngularReact(metadata?: AngularReactMetadata) {
+  return <T>(componentType: Type<T>) => {
+    Promise.resolve().then(() => {
+      const componentDef: ɵComponentDef<T> = componentType[ɵNG_COMP_DEF];
+
+      if (componentDef === undefined) {
+        throw new Error('Ivy is not enabled.');
+      }
+
+      setAngularReactMetadata(componentDef, metadata ?? {});
+    });
+
+    return componentType as any;
+  }
+}

libs/core/src/lib/decorators/index.ts

@@ -0,0 +1 @@
+export { AngularReact } from './angular-react';

libs/core/src/lib/renderer/renderer.ts

@@ -9,6 +9,7 @@ import { ReactContent } from './react-content';
 import { isReactNode, ReactNode } from './react-node';
 import { registerElement } from './registry';
 import './geteventlisteners';
+import { isAngularReactComponent } from '../utils/angular-react/metadata';
 
 const DEBUG = false;
 
@@ -41,7 +42,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
   }
 
   createRenderer(element: any, type: RendererType2 | null): Renderer2 {
-    if (typeof type.styles?.[0] === 'string' && type.styles[0].startsWith('react-renderer')) {
+    if (type.styles?.[0] === 'react-renderer' || isAngularReactComponent(type)) {
       return this.defaultReactRenderer;
     }
 

libs/core/src/lib/utils/angular-react/metadata.ts

@@ -0,0 +1,35 @@
+import { AngularReactMetadata } from '../../declarations/interfaces';
+import { RendererType2 } from '@angular/core';
+
+const KEY = 'angularReact';
+
+export const setAngularReactMetadata = (
+  componentDef: {
+    data: {
+      [kind: string]: any;
+    };
+  },
+  metadata: AngularReactMetadata
+): void => {
+  if (componentDef.data) {
+    componentDef.data[KEY] = metadata;
+  } else {
+    componentDef.data = {
+      [KEY]: metadata
+    }
+  }
+};
+
+export const getAngularReactMetadata = (
+  type: {
+    data: {
+      [kind: string]: any;
+    };
+  }
+): AngularReactMetadata => {
+  return type?.data?.[KEY] as AngularReactMetadata;
+};
+
+export const isAngularReactComponent = (type: RendererType2 | null): boolean => {
+  return type?.data?.[KEY] != null;
+};

libs/core/src/public-api.ts

@@ -15,3 +15,4 @@ export {
   InputRendererOptions,
   RenderPropOptions,
 } from './lib/components/render-props';
+export * from './lib/decorators/index';

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

@@ -14,7 +14,9 @@ import {
 } from '@angular/core';
 import { IBreadcrumbItem, IBreadcrumbProps } from '@fluentui/react/lib/Breadcrumb';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabBreadcrumbComponent')
 @Component({
   selector: 'fab-breadcrumb',
@@ -40,7 +42,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Breadcrumb>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabActionButtonComponent')
 @Component({
   selector: 'fab-action-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </ActionButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabCommandBarButtonComponent')
 @Component({
   selector: 'fab-command-bar-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </CommandBarButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarButtonComponent extends FabBaseButtonComponent {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabCompoundButtonComponent')
 @Component({
   selector: 'fab-compound-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </CompoundButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCompoundButtonComponent extends FabBaseButtonComponent {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabDefaultButtonComponent')
 @Component({
   selector: 'fab-default-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </DefaultButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDefaultButtonComponent extends FabBaseButtonComponent {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabIconButtonComponent')
 @Component({
   selector: 'fab-icon-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </IconButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconButtonComponent extends FabBaseButtonComponent {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabMessageBarButtonComponent')
 @Component({
   selector: 'fab-messagebar-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </MessageBarButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarButtonComponent extends FabBaseButtonComponent {

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

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabPrimaryButtonComponent')
 @Component({
   selector: 'fab-primary-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </PrimaryButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPrimaryButtonComponent extends FabBaseButtonComponent {

libs/fabric/lib/components/button/split-button.component.ts

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabSplitButtonComponent')
 @Component({
   selector: 'fab-split-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </SplitButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSplitButtonComponent extends FabBaseButtonComponent {

libs/fabric/lib/components/calendar/calendar.component.ts

@@ -18,7 +18,9 @@ import {
 import { ICalendarProps } from '@fluentui/react/lib/Calendar';
 import { CalendarStringsDirective } from './directives/calendar-strings-directive.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabCalendarComponent')
 @Component({
   selector: 'fab-calendar',
@@ -56,7 +58,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Calendar>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> implements AfterContentInit {

libs/fabric/lib/components/callout/callout.component.ts

@@ -16,7 +16,9 @@ import {
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ICalloutPositionedInfo } from '@fluentui/react/lib/utilities/positioning/positioning.types';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabCalloutComponent')
 @Component({
   selector: 'fab-callout',
@@ -63,7 +65,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Callout>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {

libs/fabric/lib/components/callout/focus-trap-callout.component.ts

@@ -16,7 +16,9 @@ import {
 import { IFocusTrapCalloutProps } from '@fluentui/react/lib/Callout';
 import { ICalloutPositionedInfo } from '@fluentui/react/lib/utilities/positioning';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabFocusTrapCalloutComponent')
 @Component({
   selector: 'fab-focus-trap-callout',
@@ -66,7 +68,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Callout>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabFocusTrapCalloutComponent extends ReactWrapperComponent<IFocusTrapCalloutProps> {

libs/fabric/lib/components/checkbox/checkbox.component.ts

@@ -18,7 +18,9 @@ import {
 import { ICheckboxProps } from '@fluentui/react/lib/Checkbox';
 import { FormEvent } from 'react';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabCheckboxComponent')
 @Component({
   selector: 'fab-checkbox',
@@ -47,7 +49,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Checkbox>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit {

libs/fabric/lib/components/choice-group/choice-group.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { IChoiceGroupOption, IChoiceGroupProps } from '@fluentui/react/lib/ChoiceGroup';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabChoiceGroupComponent')
 @Component({
   selector: 'fab-choice-group',
@@ -37,7 +39,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </ChoiceGroup>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {

libs/fabric/lib/components/combo-box/combo-box.component.ts

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseComboBoxComponent } from './base-combo-box.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabComboBoxComponent')
 @Component({
   selector: 'fab-combo-box',
@@ -55,7 +57,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </ComboBox>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabComboBoxComponent extends FabBaseComboBoxComponent {

libs/fabric/lib/components/combo-box/virtualized-combo-box.component.ts

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseComboBoxComponent } from './base-combo-box.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabVirtualizedComboBoxComponent')
 @Component({
   selector: 'fab-virtualized-combo-box',
@@ -55,7 +57,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </VirtualizedComboBox>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {

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

@@ -33,7 +33,9 @@ import {
   CommandBarItemsDirectiveBase,
   CommandBarOverflowItemsDirective,
 } from './directives/command-bar-items.directives';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabCommandBarComponent')
 @Component({
   selector: 'fab-command-bar',
@@ -60,7 +62,6 @@ import {
     >
     </CommandBar>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>

libs/fabric/lib/components/date-picker/date-picker.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { IDatePickerProps } from '@fluentui/react/lib/DatePicker';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabDatePickerComponent')
 @Component({
   selector: 'fab-date-picker',
@@ -64,7 +66,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </DatePicker>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> {

libs/fabric/lib/components/details-list/details-list.component.ts

@@ -39,7 +39,9 @@ import { IDetailsListColumnOptions } from './directives/details-list-column.dire
 import { DetailsListColumnsDirective } from './directives/details-list-columns.directive';
 import { DetailsListGroupsDirective } from './directives/details-list-groups.directive';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabDetailsListComponent')
 @Component({
   selector: 'fab-details-list',
@@ -112,7 +114,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </DetailsList>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps>

libs/fabric/lib/components/dialog/dialog.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { IDialogContentProps, IDialogFooterProps, IDialogProps } from '@fluentui/react/lib/Dialog';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabDialogComponent')
 @Component({
   selector: 'fab-dialog',
@@ -44,7 +46,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Dialog>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
@@ -79,6 +80,7 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
   }
 }
 
+@AngularReact()
 @Styled('FabDialogFooterComponent')
 @Component({
   selector: 'fab-dialog-footer',
@@ -88,7 +90,6 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
       <ReactContent><ng-content></ng-content></ReactContent>
     </DialogFooter>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
@@ -104,6 +105,7 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
   }
 }
 
+@AngularReact()
 @Styled('FabDialogContentComponent')
 @Component({
   selector: 'fab-dialog-content',
@@ -131,7 +133,6 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
       <ReactContent><ng-content></ng-content></ReactContent>
     </DialogContent>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {

libs/fabric/lib/components/divider/divider.component.ts

@@ -13,7 +13,9 @@ import {
 } from '@angular/core';
 import { IVerticalDividerProps } from '@fluentui/react/lib/Divider';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabDividerComponent')
 @Component({
   selector: 'fab-vertical-divider',
@@ -28,7 +30,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </VerticalDivider>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerProps> {

libs/fabric/lib/components/dropdown/dropdown.component.ts

@@ -20,7 +20,9 @@ import { IDropdownProps, IDropdownOption, IDropdown } from '@fluentui/react/lib/
 import { ISelectableDroppableTextProps, ISelectableOption } from '@fluentui/react/lib/SelectableOption';
 import { DropdownOptionsDirective } from './directives/dropdown-options.directive';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabDropdownComponent')
 @Component({
   selector: 'fab-dropdown',
@@ -64,7 +66,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       [Dismiss]="onDismissHandler"
     ></Dropdown>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit, AfterContentInit {

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

@@ -13,7 +13,9 @@ import {
 } from '@angular/core';
 import { IFabricProps } from '@fluentui/react/lib/Fabric';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabFabricComponent')
 @Component({
   selector: 'fab-fabric',
@@ -23,7 +25,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Fabric>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {

libs/fabric/lib/components/grouped-list/grouped-list.component.ts

@@ -18,7 +18,9 @@ import {
 import { IGroup, IGroupedListProps, IGroupRenderProps } from '@fluentui/react/lib/GroupedList';
 import { IListProps } from '@fluentui/react/lib/List';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabGroupedListComponent')
 @Component({
   selector: 'fab-grouped-list',
@@ -49,7 +51,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </GroupedList>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit {

libs/fabric/lib/components/hover-card/expanding-card.component.ts

@@ -17,7 +17,9 @@ import {
 } from '@angular/core';
 import { IExpandingCardProps } from '@fluentui/react/lib/HoverCard';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabExpandingCardComponent')
 @Component({
   selector: 'fab-expanding-card',
@@ -46,7 +48,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </ExpandingCard>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabExpandingCardComponent extends ReactWrapperComponent<IExpandingCardProps> implements OnInit {

libs/fabric/lib/components/hover-card/hover-card.component.ts

@@ -16,7 +16,9 @@ import {
 } from '@angular/core';
 import { IExpandingCardProps, IHoverCardProps, IPlainCardProps } from '@fluentui/react/lib/HoverCard';
 import { omit, Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabHoverCardComponent')
 @Component({
   selector: 'fab-hover-card',
@@ -50,7 +52,6 @@ import { omit, Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </HoverCard>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> {

libs/fabric/lib/components/hover-card/plain-card.component.ts

@@ -17,7 +17,9 @@ import {
 } from '@angular/core';
 import { IPlainCardProps } from '@fluentui/react/lib/HoverCard';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabPlainCardComponent')
 @Component({
   selector: 'fab-plain-card',
@@ -42,7 +44,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </PlainCard>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPlainCardComponent extends ReactWrapperComponent<IPlainCardProps> implements OnInit {

libs/fabric/lib/components/icon/icon.component.ts

@@ -13,7 +13,9 @@ import {
 } from '@angular/core';
 import { IIconProps } from '@fluentui/react/lib/Icon';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabIconComponent')
 @Component({
   selector: 'fab-icon',
@@ -31,7 +33,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Icon>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconComponent extends ReactWrapperComponent<IIconProps> {

libs/fabric/lib/components/image/image.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { IImageProps, ImageLoadState } from '@fluentui/react/lib/Image';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabImageComponent')
 @Component({
   selector: 'fab-image',
@@ -45,7 +47,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Image>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabImageComponent extends ReactWrapperComponent<IImageProps> {

libs/fabric/lib/components/link/link.component.ts

@@ -13,7 +13,9 @@ import {
 } from '@angular/core';
 import { ILinkProps, Link } from '@fluentui/react/lib/Link';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabLinkComponent')
 @Component({
   selector: 'fab-link',
@@ -48,7 +50,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Disguise>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {

libs/fabric/lib/components/marquee-selection/marquee-selection.component.ts

@@ -14,7 +14,9 @@ import {
 import { ReactWrapperComponent } from '@angular-react/core';
 import { IMarqueeSelectionProps } from '@fluentui/react/lib/MarqueeSelection';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabMarqueeSelectionComponent')
 @Component({
   selector: 'fab-marquee-selection',
@@ -35,7 +37,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </MarqueeSelection>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> {

libs/fabric/lib/components/message-bar/message-bar.component.ts

@@ -17,7 +17,9 @@ import {
 } from '@angular/core';
 import { IMessageBarProps } from '@fluentui/react/lib/MessageBar';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabMessageBarComponent')
 @Component({
   selector: 'fab-message-bar',
@@ -40,7 +42,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </MessageBar>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit {

libs/fabric/lib/components/modal/modal.component.ts

@@ -17,7 +17,9 @@ import { IAccessiblePopupProps } from '@fluentui/react/lib/common/IAccessiblePop
 import { IModalProps } from '@fluentui/react/lib/Modal';
 import { IWithResponsiveModeState } from '@fluentui/react/lib/utilities/decorators/withResponsiveMode';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabModalComponent')
 @Component({
   selector: 'fab-modal',
@@ -52,7 +54,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Modal>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabModalComponent extends ReactWrapperComponent<IModalProps>

libs/fabric/lib/components/nav/nav.component.ts

@@ -15,7 +15,9 @@ import {
   EventEmitter,
 } from '@angular/core';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabNavComponent')
 @Component({
   selector: 'fab-nav',
@@ -35,7 +37,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Nav>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabNavComponent extends ReactWrapperComponent<INavProps> {

libs/fabric/lib/components/panel/panel.component.ts

@@ -17,7 +17,9 @@ import {
 } from '@angular/core';
 import { IPanelHeaderRenderer, IPanelProps } from '@fluentui/react/lib/Panel';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabPanelComponent')
 @Component({
   selector: 'fab-panel',
@@ -62,7 +64,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Panel>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit {

libs/fabric/lib/components/persona/persona.component.ts

@@ -48,7 +48,9 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
     this.onRenderInitials = this.createRenderPropHandler(this.renderInitials);
   }
 }
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabPersonaComponent')
 @Component({
   selector: 'fab-persona',
@@ -90,7 +92,6 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
     >
     </Persona>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit {
@@ -125,6 +126,7 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
   }
 }
 
+@AngularReact()
 @Styled('FabPersonaCoinComponent')
 @Component({
   selector: 'fab-persona-coin',
@@ -160,7 +162,6 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
     >
     </PersonaCoin>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit {

libs/fabric/lib/components/pickers/people-picker/people-picker.component.ts

@@ -16,7 +16,9 @@ import {
   import { IPeoplePickerProps } from '@fluentui/react/lib/Pickers';
   import { IPersonaProps } from '@fluentui/react/lib/Persona';
   import { Styled } from '@angular-react/fabric/lib/utils';
+  import { AngularReact } from '@angular-react/core';
 
+  @AngularReact()
   @Styled('FabPeoplePickerComponent')
   @Component({
     selector: 'fab-people-picker',
@@ -55,7 +57,6 @@ import {
       >
       </PeoplePicker>
     `,
-    styles: ['react-renderer { display: none; }'],
     changeDetection: ChangeDetectionStrategy.OnPush,
   })
   export class FabPeoplePickerComponent extends FabBasePickerComponent<IPersonaProps, IPeoplePickerProps> {

libs/fabric/lib/components/pickers/tag-picker/tag-picker.component.ts

@@ -13,7 +13,9 @@ import {
 import { ITag, ITagPickerProps } from '@fluentui/react/lib/Pickers';
 import { FabBasePickerComponent } from '../base-picker/base-picker.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabTagPickerComponent')
 @Component({
   selector: 'fab-tag-picker',
@@ -52,7 +54,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </TagPicker>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPickerProps> {

libs/fabric/lib/components/pivot/pivot.component.ts

@@ -20,7 +20,9 @@ import {
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from '@fluentui/react/lib/Pivot';
 import * as React from 'react';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabPivotItemComponent')
 @Component({
   selector: 'fab-pivot-item',
@@ -42,7 +44,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </PivotItem>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps> implements OnInit {
@@ -72,6 +73,7 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
   }
 }
 
+@AngularReact()
 @Styled('FabPivotComponent')
 @Component({
   selector: 'fab-pivot',
@@ -98,7 +100,6 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
       <ReactContent><ng-content select="fab-pivot-item"></ng-content></ReactContent>
     </Disguise>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {

libs/fabric/lib/components/progress-indicator/progress-indicator.component.ts

@@ -14,7 +14,9 @@ import {
 } from '@angular/core';
 import { IProgressIndicatorProps } from '@fluentui/react/lib/ProgressIndicator';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabProgressIndicatorComponent')
 @Component({
   selector: 'fab-progress-indicator',
@@ -35,7 +37,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </ProgressIndicator>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabProgressIndicatorComponent extends ReactWrapperComponent<IProgressIndicatorProps> implements OnInit {

libs/fabric/lib/components/rating/rating.component.ts

@@ -2,7 +2,9 @@ import { InputRendererOptions, passProp, ReactWrapperComponent } from '@angular-
 import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, Output, Renderer2, ViewChild, EventEmitter, OnInit } from '@angular/core';
 import { IRatingProps, IRatingStarProps } from '@fluentui/react/lib/Rating';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabRatingComponent')
 @Component({
   selector: 'fab-rating',
@@ -30,7 +32,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       [RenderStar]="renderStar && onRenderStar"
     ></Rating>
   `,
-  styles: ['react-renderer { display: none; }'],
 })
 export class FabRatingComponent extends ReactWrapperComponent<IRatingProps> implements OnInit {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

libs/fabric/lib/components/search-box/search-box.component.ts

@@ -17,7 +17,9 @@ import {
 import { IButtonProps } from '@fluentui/react/lib/Button';
 import { ISearchBoxProps } from '@fluentui/react/lib/SearchBox';
 import { omit, Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabSearchBoxComponent')
 @Component({
   selector: 'fab-search-box',
@@ -43,7 +45,6 @@ import { omit, Styled } from '@angular-react/fabric/lib/utils';
     >
     </SearchBox>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {

libs/fabric/lib/components/shimmer/shimmer.component.ts

@@ -15,7 +15,9 @@ import {
 import { IShimmerElementsGroupProps } from '@fluentui/react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types';
 import { IShimmerProps } from '@fluentui/react/lib/Shimmer';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabShimmerComponent')
 @Component({
   selector: 'fab-shimmer',
@@ -36,7 +38,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </Shimmer>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
@@ -73,6 +74,7 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
   }
 }
 
+@AngularReact()
 @Styled('FabShimmerElementsGroupComponent')
 @Component({
   selector: 'fab-shimmer-elements-group',
@@ -91,7 +93,6 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
     >
     </ShimmerElementsGroup>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShimmerElementsGroupProps> {

libs/fabric/lib/components/slider/slider.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { ISliderProps } from '@fluentui/react/lib/Slider';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabSliderComponent')
 @Component({
   selector: 'fab-slider',
@@ -46,7 +48,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Slider>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSliderComponent extends ReactWrapperComponent<ISliderProps> {

libs/fabric/lib/components/spin-button/spin-button.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { ISpinButtonProps } from '@fluentui/react/lib/SpinButton';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabSpinButtonComponent')
 @Component({
   selector: 'fab-spin-button',
@@ -59,7 +61,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </SpinButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSpinButtonComponent extends ReactWrapperComponent<ISpinButtonProps> {

libs/fabric/lib/components/spinner/spinner.component.ts

@@ -13,7 +13,9 @@ import {
 } from '@angular/core';
 import { ISpinnerProps } from '@fluentui/react/lib/Spinner';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabSpinnerComponent')
 @Component({
   selector: 'fab-spinner',
@@ -34,7 +36,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Spinner>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSpinnerComponent extends ReactWrapperComponent<ISpinnerProps> {

libs/fabric/lib/components/text-field/masked-text-field.component.ts

@@ -5,7 +5,9 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inpu
 import { FabBaseTextFieldComponent } from './base-text-field.component';
 import { IMaskedTextFieldProps } from '@fluentui/react/lib/TextField';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabMaskedTextFieldComponent')
 @Component({
   selector: 'fab-masked-text-field',
@@ -67,7 +69,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </MaskedTextField>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabMaskedTextFieldComponent extends FabBaseTextFieldComponent {

libs/fabric/lib/components/text-field/text-field.component.ts

@@ -4,7 +4,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { FabBaseTextFieldComponent } from './base-text-field.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabTextFieldComponent')
 @Component({
   selector: 'fab-text-field',
@@ -64,7 +66,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </TextField>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTextFieldComponent extends FabBaseTextFieldComponent {

libs/fabric/lib/components/toggle/toggle.component.ts

@@ -15,7 +15,9 @@ import {
 } from '@angular/core';
 import { IToggleProps } from '@fluentui/react/lib/Toggle';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabToggleComponent')
 @Component({
   selector: 'fab-toggle',
@@ -38,7 +40,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Toggle>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabToggleComponent extends ReactWrapperComponent<IToggleProps> {

libs/fabric/lib/components/tooltip/tooltip-host.component.ts

@@ -16,7 +16,9 @@ import {
 } from '@angular/core';
 import { ITooltipHostProps, ITooltipProps } from '@fluentui/react/lib/Tooltip';
 import { omit, Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabTooltipHostComponent')
 @Component({
   selector: 'fab-tooltip-host',
@@ -41,7 +43,6 @@ import { omit, Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </TooltipHost>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostProps> {

libs/semantic-ui/src/lib/button/button.component.ts

@@ -8,7 +8,9 @@
 // tslint:disable:no-output-on-prefix
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Component({
   selector: 'sem-button',
   exportAs: 'semButton',
@@ -23,7 +25,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
       (onClick)="onClick.emit($event)"
     ></Button>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'sem-button' },
 })