Ionic 2 - How to remove split bar on login page only?
I am using this code in app.html, the split panel works nicely. But the problem is the panel works for every page like login or SignUp, so please help me to prevent the panel from being split into each 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>
+3
source to share
2 answers
Based on what hoeksms mentioned here , you could use a generic service like:
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 app.component use this service to show / hide it:
<ion-split-pane [when]="splitPaneData.getSplitPane()">
If you want to hide it on a given page, you can use lifecycle events ionViewWillEnter
and ionViewWillLeave
:
ionViewWillEnter() {
// Disable the split plane in this page
this.splitPaneData.setSplitPane(false);
}
ionViewWillLeave() {
// Enable it again when leaving the page
this.splitPaneData.setSplitPane(true);
}
+1
source to share
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 turn off the menu and swipe your finger across the screen with this feature that will automatically hide.
+1
source to share