Ionic-framework: <ion-toolbar> overlaps content when dynamically shown by *ngIf

[alex-pl]

Short description of the problem:

I'm using an <ion-toolbar> together with *ngIf. If the value of *ngIf is set during page creation, everything works as expected. When I change the expression to true after ionViewWillEnter() got called, the the <ion-content> is partially hidden underneath the toolbar.

What behavior are you expecting?

Dynamically showing and hiding the <ion-toolbar> with *ngIf should correctly add and remove the upper padding of <ion-content>.

Steps to reproduce:

1. Create an <ion-header> with an <ion-nav> and an <ion-toolbar> as well as an <ion-content> element with some sample text.
2. Add an *ngIf="showToolbar" attribute to the <ion-toolbar>.
3. Set this.showToolbar = true; inside of ionViewWillEnter() and a setTimeout(). The timeout simulates an API request.

<ion-header>
    <ion-navbar [attr.no-border-bottom]="showToolbar ? '' : null">
        <ion-title>Example</ion-title>
    </ion-navbar>

    <ion-toolbar *ngIf="showToolbar" no-border-top>
        <ion-segment [(ngModel)]="segment" primary>
            <ion-segment-button value="1">Segment 1</ion-segment-button>
            <ion-segment-button value="2">Segment 2</ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>

<ion-content>
    <p>Test content that gets hidden.</p>
</ion-content>

constructor(private nav: NavController) {
    this.showToolbar = false;
}

ionViewWillEnter() {
    // timeout would be a http request in a real application 
    window.setTimeout(() => {
        this.showToolbar = true;
    }, 1000);
}

Other information:
My use case is to dynamically show this toolbar with an <ion-segment>, if there is more than one option available.

Which Ionic Version? 2.0.0-beta.11

Plunker that shows an example of your issue

http://plnkr.co/edit/GqYShnKP4gwi1uNEqjn5?p=preview

Run ionic info from terminal/cmd prompt:
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.3.1 Build version 7D1014

[brandyscarney]

Please call the resize function on the content in order to recalculate the content size: http://ionicframework.com/docs/v2/api/components/content/Content/#resize

There is some example usage here: http://ionicframework.com/docs/v2/api/components/content/Content/#advanced

Thanks!

[alex-pl]

Awesome, thank you for the quick help! :)
I wasn't aware that <ion-content> has its own methods like other complex components.