import { Component } from '@angular/core';
    import { MenuController,IonicPage, NavController } from 'ionic-angular';

    @IonicPage()

    @Component({
      selector: 'page-signup',
      templateUrl: 'signup.html',
    })

    export class SignUp {

    constructor(public navCtrl: NavController, public menu : MenuController) 
    {   
       this.menu.enable(false);
       this.menu.swipeEnable(false);
    }

    ionViewWillLeave(){
    this.menu.enable(true);
    this.menu.swipeEnable(true);
    }
  }

Hope this helps. just disable menu and swipe the menu with that splitpane automatically hides.

Based on what hoeksms mentioned here, you could use a shared service like this:

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

@Injectable()
export class SplitPaneData {

    splitPaneState: boolean;

    constructor(public platform: Platform) {
        this.splitPaneState = false;
    }

    setSplitPane(state: boolean) {
        if (this.platform.width() > 768) {
            this.splitPaneState = state;
        } else {
            this.splitPaneState = false;
        }
    }

    getSplitPane() {
        return this.splitPaneState;
    }

}

And in the app.component use that service to show/hide it:

<ion-split-pane [when]="splitPaneData.getSplitPane()">

If you want to hide it in a given page, you can use the ionViewWillEnter and ionViewWillLeave lifecycle events:

ionViewWillEnter() {
    // Disable the split plane in this page
    this.splitPaneData.setSplitPane(false);
}

ionViewWillLeave() {
    // Enable it again when leaving the page
    this.splitPaneData.setSplitPane(true);
}

update ionic 5

work for me login.page.ts

  constructor(
    private api: LoginService,
    private loadCt: LoadingController,
    private nav : NavController,
    public menu : MenuController
    ) {
      this.menu.enable(false);
      this.menu.swipeGesture(false)
     }

     ionViewWillLeave(){
      this.menu.enable(true);
      this.menu.swipeGesture(true);
      }