Split Pane Issues

Hey! I’m starting to use the new split-pane and I’m having issues. I have a “marketplace” side of my app and an “admin” side of my app. I’d like the marketplace side to use a side menu and the admin side to use the new split pane.

The issue I’m having is whichever one I set to load first in my app.component “wins” and has its menu show correctly, and the other one when navigated to doesn’t have its nav show up. Here are the components.

Does split pane only work when it is on the app.components nav? Am I doing something wrong?

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { AuthService } from '../providers/auth.service';
// import { Page1 } from '../pages/page1/page1';
import { Marketplace } from './marketplace.component';
import { Admin } from '../pages/admin/admin.component';

import { ENV } from '../config/environment';

@Component({
  template: `
    <ion-nav [root]="rootPage" #content></ion-nav>
  `
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Admin;

  constructor(
    public platform: Platform,
    public authService: AuthService) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, App } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { AuthService } from '../providers/auth.service';
import { Page1 } from '../pages/page1/page1';
import { Admin } from '../pages/admin/admin.component';

@Component({
  template: `
  <ion-menu [content]="marketplace">
    <ion-header>
      <ion-toolbar>
        <ion-title>Marketplace Menu</ion-title>
      </ion-toolbar>
      <button menuClose ion-item (click)="goToAdmin()">
        Admin
      </button>
    </ion-header>
  </ion-menu>

  <ion-nav [root]="rootPage" #marketplace swipeBackEnabled="false"></ion-nav>
  `
})
export class Marketplace {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

  constructor(
    public platform: Platform,
    public authService: AuthService,
    public appCtrl: App) {}

  goToAdmin() {
    this.appCtrl.getRootNav().setRoot(Admin);
  }
}
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Nav, App } from 'ionic-angular';

import { AdminHome } from './admin-home.component';
import { Marketplace } from '../../app/marketplace.component';

@Component({
  selector: 'admin',
  template: `
  <ion-split-pane>
    <!--  our side menu  -->
    <ion-menu [content]="adminContent">
      <ion-header>
        <ion-toolbar>
          <ion-title>Admin Menu</ion-title>
        </ion-toolbar>
        <button menuClose ion-item (click)="goToMarketplace()">
          MarketPlace
        </button>
      </ion-header>
    </ion-menu>

    <!-- the main content -->
    <ion-nav [root]="root" main #adminContent></ion-nav>
  </ion-split-pane>
  `
})
export class Admin {
  root: any = AdminHome;

  constructor(
    public appCtrl: App
  ) {

  }

  goToMarketplace() {
    this.appCtrl.getRootNav().setRoot(Marketplace);
  }
}

Update: this actually happens even with a regular menu instead of the split pane menu. How do I have different menus for each area (admin & marketplace) ?

See if my blog post will help you out:

Thanks. Your blog post does a good job explaining the “inception” of having separate navs for each pane, but I’m actually trying to figure out something different. (Having the split pane for one of my components, but not the whole app.)

Ok so my current solution/workaround: I refactored my code to be like the multiple menu example. Both menus are inside the ion-split-pane, and using the when attribute I can enable/disable split pane depending on what view is being shown.

Hey Chris - great blog post. Thanks.

Is it possible to control navigation across the panes? In your example, if you clicked on an item, ‘Cards’, could you then navigate to the ‘Cards’ page in the main section of the app?

Would love to see a quick primer on that if possible.

1 Like

I’m actually wondering about the samething, haven’t figured out a way to do it yet.

Setup some soft of communication between the “container” page of your split pane and then inject the @ViewChild for the main content and do the push/setRoot from there.

If you do a solution with rxjs remember to unsubscribe if you do a global setRoot at some time (for instance when logging out) so the old subscription doesn’t stay around and tries do to navigation to a stack that is no longer present. Else there is also the Event api in Ionic: https://ionicframework.com/docs/v2/api/util/Events/

Wrote more on the Split Pane last night.

Chris

1 Like

menu’s cant be controlled using splitpane?

this.menuCtrl.enable(true, "right");
this.menuCtrl.close("right");

this does not work if using splitpane.

can anyone help