Split pane not showing


Could anyone please check why this is not working? The split pane is not showing.


    <side-menu [content]="menuContent"></side-menu>

    <!-- the main content -->
    <ion-nav [root]="rootPage" main #menuContent></ion-nav>

I just make a custom component for the menu and created content input for the component.

    <ion-menu [content]="menuContent">
                <button ion-item>Components</button>


Im having the same problem. If I put the menu directly below ion-split-pane it works, but if I have it in a custom component, it does not.


See: Reusable Grid Component To Host Pages


I’m not sure how this helps? I have my ion-menu inside a custom component so I can reuse it between our apps (I have a private npm registry where I register this module). Because of that, the ion-split-pane doesn’t seem to work. If i take the same markup that’s in the component and put it right on my app.component, it does work. Its like ion-split-pane doesn’t know how to work with my component. is there an interface I should be implementing in my component so it is picked up?


What does your SharedModule look like?

For example:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule,  } from '@angular/core';
import { CommonModule } from '@angular/common';

import { IonicModule } from 'ionic-angular';

import { MediaComponent } from '@shared/media/media.component';
import { RatingComponent } from '@shared/rating/rating.component';

  imports: [ CommonModule, IonicModule ],
  exports: [ MediaComponent, RatingComponent ],
  declarations: [ MediaComponent, RatingComponent ],
  providers: [],
  schemas: [
export class SharedModule {}

See: https://angular.io/guide/styleguide#shared-feature-module


I did notice that the menu does flicker opened but then disappears entirely when the first component’s template loads in the ion-nav.

My component looks almost identical. The difference is I have a forRoot in the module body but that is working as the custom component works when not within a split-pane.