Split pane not showing

Ionic Framework ionic-v3
1

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

<ion-split-pane>

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

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

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


    <ion-menu [content]="menuContent">
        <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <button ion-item>Components</button>
            </ion-list>
        </ion-content>
    </ion-menu>
2

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.

3

See: Reusable Grid Component To Host Pages

4

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?

5

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';

@NgModule({
  imports: [ CommonModule, IonicModule ],
  exports: [ MediaComponent, RatingComponent ],
  declarations: [ MediaComponent, RatingComponent ],
  providers: [],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class SharedModule {}

See: Angular

6

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.