Disable SplitPane on specific page

Ionic Framework ionic-v3
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.

1 Like