Ion-content hidden when using angular 2 router-outlet


I am facing an issue where the content is hidden behind my header when the page loads, or navigates to any other page.

I am using angular 2 router instead of the ionic router.

<!--<ion-nav [root]="rootPage"></ion-nav>-->

When this homepage gets rendered, it’s hidden.


<ion-content padding>
    <button ion-button color="primary">Button A</button>
    <button ion-button color="secondary">Button B</button>
    <button ion-button color="light">Button C</button>
    <button ion-button color="dark">Button D</button>
    <button ion-button clear>Button E</button>

My current workaround is simply resizing the content on page load, but hoping to not have to do this.

@ViewChild(Content) content: Content;
 ngOnInit() {

Any thoughts? I’ve seen this issue posted all over the place, but no solutions that resolve my issue, other than the one I listed above that I found myself.


Hi, @Raziaar. Have you notices about this?

Best regards!!