Conditional ion-header

trying to make space economy for mobile device and hiding header when person something typing.

so created this code:

<ion-header *ngIf="!editing">
    <ion-navbar no-border-bottom ...>
...
    </ion-navbar>
</ion-header>
<ion-content>
...

So it hiding headers but not resizing content.
image

image

Is there other way to do what I’m trying do?

Update:

Also trying hide tabs.

<ion-tabs selectedIndex="0" *ngIf="!tabs_hide">
  <ion-tab [root]="tab3Root" tabTitle="Room" [tabBadge]="unread_message_count" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Contacts" [tabBadge]="userService.getUnreadPersonalMessages()" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="People"></ion-tab>
</ion-tabs>

Here just getting exception.

Second update:

stripe fixes by adding resize() on content.

Thank you Ionic team:

Related link: