CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
EmilioSG
EmilioSG

Reputation: 380

Show multiple pages for large screen sizes in Ionic 3

I'm building a simple app with a side menu and two ion-tab. What I am trying to do is, when the screen wide enough, forget about the tabs and open both pages side by side:

Large screens layout

To keep the menu visible if the screen is large enough, I am using:

<ion-split-pane when="lg">

And to hide the Tabs:

TS file: this.showTabs = platform.width() < 992;

And then, in the HTML file, I just add the attribute: *ngIf="showTabs"

Is it possible to load two pages inside an ion-content? Any alternative solution?

Any help would be appreciated!

Upvotes: 1

Views: 1292

Answers (1)

EmilioSG
EmilioSG

Reputation: 380

Ok, I've found a solution for this. I'll post it here in case someone experiences the same problem.

We can create a custom component with:

ionic generate component name-of-component

The components can be embedded within the ionic pages. To use them in a Page, you just have to import the component in the .module.ts of the Page and then use the HTML tag with the selector name of the component, as Ivaro18 mentioned:

<component-name></component-name>

If you want to use lazy loading, you can create a components.module.ts inside the components folder to act as an index of all the custom components. It would look like this:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';

import { Component1 } from './component1/component1';
import { Component2 } from './component2/component2';
import { Component3 } from './component3/component3';

@NgModule({
    declarations: [
        Component1,
        Component2,
        Component3
    ],
    imports: [IonicModule],
    exports: [
        Component1,
        Component2,
        Component3
    ]
})

export class ComponentsModule{}

Then, in the Pages, we would import ComponentsModule. That would allow us to lazy load any of the components:

<component-2-selector></component-2-selector>

Hope this helps!

Upvotes: 3

Related Questions