ngIf not immediately loading template when false

Question

I have a component which will load a Youtube video when true. However, when the ngIf statement evaluates too false the template does not load. The context for the problem is that I'm trying to conditionally render a div when an ad blocker blocks a Youtube video just to let the user know why the content isn't loading rather than having a white box. I have a created a service which returns a Boolean and I am sure that is working. Interestingly when I search for the matching text in the Chrome dev tools elements filter it triggers the template to load.

So far I've tried putting change detection refs into various life cycles. without much luck. I building on a component that was originally written by someone else. It does implement a change detection strategy onPush. I'm unsure if that is creating problems.

<div *ngIf='loadYoutube; else loadError'>
    <iframe [width]="width"
        [height]="height"
        [src]="src | safe:'url'"
        frameborder="0"
        allowfullscreen
        class="youtube-player">
    </iframe>
</div>
<ng-template #loadError>
    <p>
      Turn Yo ad blocker off please
    </p>
</ng-template>

Currently when loadYouTube evaluates to true it performs as expected. When false a white box appears. As mentioned, when searching keywords from the elements tab of the chrome inspector the template loads.

Can you please create a Stackblitz for this. Your provided snippet looks fine to me. — Zze
Does loadYoutube ever evaluate to false for whichever reasons? — wentjun
Load Youtube should evaluate to false when an adblocker is detected. I only just googled what StackBlitz was. Looks very cool. Not 100% comfortable uploading code as it's for a commercial site. — Matthew Martin
Try getting rid of the semicolon after loadYoutube. *ngIf='loadYoutube else loadError' — Adrian Brand
I've just tried getting rid of the semicolon same result I'm afraid. — Matthew Martin

tavOu tavOu · Accepted Answer · 2019-04-08T06:52:53

Loadyoutube always has value? You init that in constructor or in ngOnInit?

Y try with default strategy meanwhile, i think onPush can generate problems in your case.

ngIf not immediately loading template when false

2 Answers