5.0.0-alpha

Author: Zoran Liu

angular.json

@@ -235,7 +235,7 @@
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "libs/semantic-ui/tsconfig.lib.json",
-            "project": "libs/semantic-ui/package.json"
+            "project": "libs/semantic-ui/ng-package.json"
           },
           "configurations": {
             "production": {
@@ -266,7 +266,7 @@
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "libs/toolkit/tsconfig.lib.json",
-            "project": "libs/toolkit/package.json"
+            "project": "libs/toolkit/ng-package.json"
           },
           "configurations": {
             "production": {

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

@@ -38,7 +38,7 @@ import { ReactWrapperComponent } from '@angular-react/core';
     </ReactDot>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: ['react-renderer {}'],
+  styles: ['react-renderer { display: none; }'],
 })
 export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

libs/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-react/core",
-  "version": "4.0.1",
+  "version": "5.0.0-alpha",
   "description": "Use React components inside Angular",
   "author": {
     "name": "Ben Feely",

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

@@ -41,13 +41,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
   }
 
   createRenderer(element: any, type: RendererType2 | null): Renderer2 {
-    if (
-      type?.styles?.length
-      && (
-        type.styles[0] === 'react-renderer'
-        || type.styles[0] === 'react-renderer {}'
-      )
-    ) {
+    if (typeof type.styles?.[0] === 'string' && type.styles[0].startsWith('react-renderer')) {
       return this.defaultReactRenderer;
     }
 

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

@@ -40,7 +40,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Breadcrumb>
   `,
-  styles: ['react-renderer {}'],
+  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

@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </ActionButton>
   `,
-  styles: ['react-renderer {}'],
+  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {

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

@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </CommandBarButton>
   `,
-  styles: ['react-renderer {}'],
+  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCommandBarButtonComponent extends FabBaseButtonComponent {

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

@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </CompoundButton>
   `,
-  styles: ['react-renderer {}'],
+  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabCompoundButtonComponent extends FabBaseButtonComponent {

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

@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </DefaultButton>
   `,
-  styles: ['react-renderer {}'],
+  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabDefaultButtonComponent extends FabBaseButtonComponent {

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

@@ -65,7 +65,7 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </IconButton>
   `,
-  styles: ['react-renderer {}'],
+  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabIconButtonComponent extends FabBaseButtonComponent {