fix(show-hide): set explicit display fallback for SSR (#1252)

angular · May 13, 2020 · 0c5811d · 0c5811d
1 parent b028210
commit 0c5811d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts
@@ -30,21 +30,22 @@ import {takeUntil} from 'rxjs/operators';
 
 export interface ShowHideParent {
   display: string;
+  isServer: boolean;
 }
 
 @Injectable({providedIn: 'root'})
 export class ShowHideStyleBuilder extends StyleBuilder {
   buildStyles(show: string, parent: ShowHideParent) {
     const shouldShow = show === 'true';
-    return {'display': shouldShow ? parent.display : 'none'};
+    return {'display': shouldShow ? parent.display || (parent.isServer ? 'initial' : '') : 'none'};
   }
 }
 
 @Directive()
 export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges {
   protected DIRECTIVE_KEY = 'show-hide';
 
-  /** Original dom Elements CSS display style */
+  /** Original DOM Element CSS display style */
   protected display: string = '';
   protected hasLayout = false;
   protected hasFlexChild = false;
@@ -146,8 +147,9 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
     if (value === '') {
       return;
     }
-    this.addStyles(value ? 'true' : 'false', {display: this.display});
-    if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {
+    const isServer = isPlatformServer(this.platformId);
+    this.addStyles(value ? 'true' : 'false', {display: this.display, isServer});
+    if (isServer && this.serverModuleLoaded) {
       this.nativeElement.style.setProperty('display', '');
     }
     this.marshal.triggerUpdate(this.parentElement!, 'layout-gap');

diff --git a/src/lib/extended/show-hide/show.spec.ts b/src/lib/extended/show-hide/show.spec.ts
@@ -299,8 +299,8 @@ describe('show directive', () => {
           'display': 'inline'
         }, styler);
       } else {
-        expectEl(queryFor(fixture, elSelector)[0]).not.toHaveStyle({
-          'display': '*'
+        expectEl(queryFor(fixture, elSelector)[0]).toHaveStyle({
+          'display': 'initial'
         }, styler);
       }
 
@@ -318,8 +318,8 @@ describe('show directive', () => {
           'display': 'inline'
         }, styler);
       } else {
-        expectEl(queryFor(fixture, elSelector)[0]).not.toHaveStyle({
-          'display': '*'
+        expectEl(queryFor(fixture, elSelector)[0]).toHaveStyle({
+          'display': 'initial'
         }, styler);
       }
     });