Elements outside ion-content may not in same zone?

Hi all, I’ve put some elements outside the content area, for example

<ion-header></ion-header>
<ion-content> some content </ion-content>
<ion-footer>...</ion-footer>

<div [style.display]="shouldShow?'block':'none'" class="container">
 <button (click)="onClick()">click</button>
</div>

I found that there was missing change detection which was triggered by above onClick, unless I put the code in zone.run(). Otherwise view was not changed after onClick() was actually called

I was wondering if the elements outside ion-content are not same default zone.

(Sorry, I’m not quite familiar with Zone, I’m trying to make me clear)

Don’t do this.

You shouldn’t be. If you are interacting with zones manually, either something fundamental is broken in your app or there is a framework bug.

Could you please explain a little bit more why shouldn’t put elements outside content? Thanks

Btw, the outside element would display as a fullscreen overlay of content, not under the content

Sorry, but not much more than a parent saying “because I said so”. The ion-header docs mention that it is one of the three allowed root elements of a page, and ion-content and ion-footer are the other two. Perhaps a Popover might do what you are looking for?

In my case, the outside element did get displayed over the content area, just lost some change detection.

Indeed, I’m thinking of Popover or ModalController, may be alternative solution, thanks for suggestion. I just wanna figure out the root cause and zone

I think this is a mistake. Whatever you happen to find should not be relied on, as it may change without notice and might not even be as consistent as you think.