Disable SplitPane on specific page

Ionic Framework ionic-v3
1

I’m testing the new SplitPane component in v2.2 and it works just fine. But I’m trying to disable the SplitPane on one specific page. When I look at the docs, it looks as if this would be easy, because I can use a boolean in [when].

When I try this in a clean install of a Ionic App (version: 2.2, template: sidemenu), it seems that I can not disable the SplitPane in a Page component.

My app.html :

<ion-split-pane [when]="isLarge">
...
</ion-split-pane>

My page1.ts:

class Page1 {
  public isLarge = false;
  constructor(){}
}

This doesn’t work, because the SplitPane is still showing on Page1.

When I put the same boolean variable in my app.component.ts the boolean value works as intended.
My app.component.ts:

class MyApp {
  public isLarge = false;
  constructor(){}
}

So, my question is: how can I disable SplitPane on a specific page?

Any help would be greatly appreciated.

Kind regards,
Sybrand Hoeksma

2

Either make a service that lets you share the hide / show between components, or use two base layouts.

Service is probably simpler, but setting the ‘when’ like that overrides the intended purpose of making the side menu responsive and hiding at a given screen size.

3

So how do I use two base layouts?? From what I understand, Angular 2 / Ionic 2 does not support dynamic templateUrl.

4

Check out either of these tutorials. Again this will depend on your use case and how you want to hook it up, but it is definitely possible:


5

Thanks @rloui for the examples of using multiple layouts. Very interesting. However, for my specific case I followed your first advice and I created a service. I can now enable/disable the SplitPane on every Page Component.

I also ran into another problem, but I managed to solve that as well. The docs say that I can use a media query or a boolean in the [when] statement. But I want to use both, but of course that does not work:

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

So I ended up with checking the screen size in the service, using platform.width()

app.html:

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

splitpane-data.ts:

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() > 992) {
			this.splitPaneState = state;
		} else {
			this.splitPaneState = false;
		}
	}

	getSplitPane() {
		return this.splitPaneState;
	}

}

I’m not sure this is the most elegant solution, but for now, it seems to work as I intended.

6

Hi @hoeksms, you may try adding this:

this.menuCtrl.enable(false);

under constructor of pages you don’t want to have ion-split-pane. Thanks.

7

thanks jiahao, it works great

8

thanx for this solution works great for my app with login page, on that page i want to hide the menu! If succes on the redirect page i addthis.menuCtrl.enable(true);

10

This is Ionic 4 I am working with. I just use a variable in a service to control the ion-split-pane. Here it goes:

<ion-split-pane [when]="userData.splitPaneState">

user.service.ts:

export class UserData {    
   splitPaneState: any;
 ...

on entering the page when I wanted split pane hidden and the menu toggle visible:

ionViewWillEnter() {    
  this.userData.splitPaneState = false; 
}

on exit when I want it revert back to responsive:

ionViewWillLeave() {    
   splitPaneState = 'lg'; 
}
11

Try this one - I think it’s pretty easy to handle and clean.

http://meumobi.github.io/ionic/2018/11/13/side-menu-tabs-login-page-ionic4.html

=> GIT: https://github.com/meumobi/meu-starter.tabs-sidemenu.ionic-v4

12

I am using Ionic 7 and Angular 16 with ion-split-pane with [when] condition was NOT working!
I had set a variable - isLoggedIn and checked against that to control the menu.

This code in app.component.html is NOT working !
<ion-split-pane contentId=“main” [when]=“isLoggedIn”>

Removed the [when] condition, and in app.component.ts
subscribe to oidc authorization method, check for if authorized and OUILA! It works great!

this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated}) => {
if (isAuthenticated) {
this.menuCtrl.enable(true);
} else {
this.menuCtrl.enable(false);
}

This is the solution. Thanks @ jiahao1553