How to hide the entire ion-footer?

Hi all,

I use ngIf to decide when the phone is in landscape, then ion-footer should be hidden.
My code is as below.

I can see that the isPortrait boolean value is changed when the phone rotates from portrait to landscape.

However, only the button in ion-footer becomes invisible, rather than the entire ion-footer. The ion-footer still shows as a white bar (see screenshot the white bar at the bottom overlaps with the text line ).

Why is it like this?

<ion-footer *ngIf="isPortrait">
  <ion-grid>
    <ion-row no-padding no-margin>
      <ion-col col-4 no-padding>
      </ion-col>
      <ion-col col-4 no-padding>
        <button ion-button (click)="goToNextPage()" color="secondary" round>Click it</button>
      </ion-col>
      <ion-col col-4 no-padding>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

IMG_0552

I added a logic to detectOrientation when the page is entered. It solved this issue.