Angular 5 [hidden] not fully working

Question

I'm testing an option to display/hide div based on boolean value from an observable. Based on the second answer provided from this stack question, I have the following code which collects the document body width and the returned value is used with a function that returns true:false value.

const checkScreenSize = () => document.body.clientWidth < 960;
const source$ = 
fromEvent(window,'resize').pipe(throttleTime(500));

const screenSizeChanged$ = source$.pipe(map(checkScreenSize));

this.isScreenSmall$ = screenSizeChanged$.pipe(startWith(checkScreenSize()));

and the template:

<div "horizontal" [hidden]="isScreenSmall$ | async">
 <glove-stepper-horizontal ></glove-stepper-horizontal>
   {{isScreenSmall$ | async}}
</div>
<div id="vertical" [hidden]="!isScreenSmall$ | async">
 <glove-stepper-vertical></glove-stepper-vertical>
 {{isScreenSmall$ | async}}
</div>

The rendering works if the condition is true (body < value) and the vertical div is all that's rendered, however when the condition is false both divs are displayed.

I'm aware of the better and recommended option of ngIf, however included in the div's are svg tags that are created at start time. if a change in the view is detected and ngIf.removed from the Dom the references are destroyed or never created, causing errors, based on the current value.

Would a changeDetection implementation work if incorporated with ngIf. I suppose a function to reinitialize the variables that reference the svg tags would work.

Thanks for all suggestions.

Answer 1

Your second condition won't work that way, because !isScreenSmall$ will be resolved to a boolean with a value of false as long as isScreenSmall$ is an observable.

You have to put the observable value in brackets together with the async-pipe operation to make it work correctly:

<div id="vertical" [hidden]="!(isScreenSmall$ | async)">
  <glove-stepper-vertical></glove-stepper-vertical>
  {{isScreenSmall$ | async}}
 </div>