Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

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

Merged
merged 1 commit into from
May 13, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/lib/extended/show-hide/show-hide.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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');
Expand Down
8 changes: 4 additions & 4 deletions src/lib/extended/show-hide/show.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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);
}
});
Expand Down