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.
Thanks for the help guys. As per usual the problem was much more simple than originally thought. In a higher level competent there was actually a canvas occupying the same area that text was meant to occupy. Interestingly when key text was searched in chrome element tools it brought text to the front. This made us think it was an angular rendering issue. Just a bit of an Obscure Gotcha.