Ionic 2 - How to remove split panel on login page only?

Question

I use this code in app.html, the split-pane is working beautifully. But the problem is, the pane is working for every page like login or SignUp, so please help me to prevent the split pane working for every page.

<ion-split-pane when="(min-width: 768px)">
<ion-menu [content]="content">
  <ion-content id="Chat">
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
</ion-split-pane>

Answer 1

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);
}