Master-detail splitpane with ionic 4/5

Ionic Framework
1

I try to set up a master-detail view with split panes, in which both sides can be exchanged during navigation. I found this working for ionic-3 https://medium.com/@blewpri/master-detail-with-ionic-3-split-panes-866293608d47 but struggle at porting this to ionic 4.

<ion-split-pane 
    (ionChange)="navProxy.onSplitPaneChanged($event._visible)">
    <ion-nav [root]="masterPage" 
             #masterNav>
    </ion-nav>
    <ion-nav [root]="detailPage" 
             #detailNav main> 
    </ion-nav>
</ion-split-pane>

This is used for ionic-3 to set up 2 nav objects. How would this look for ionic 4/5 with angular routing now?

I found this https://github.com/MattiLehtinen/ionic4-split-pane-menu-sample/blob/c85ad4b818e4eaabc6cb94c7463b7433f5b0b680/src/app/menu/menu.page.html which sets up only the details page as navigatable page, while the menu is static. Looks like all examples are like this only. Is there some way?

1 Like