How to properly have nested views to display?

Ionic Framework
1

Hey there! So currently were working on a project which has many nested routes which must display. The reason being is were having two separate components displaying at the same which will switch out when clicked on. My question is how do we properly get a nested view to dynamically display?

To give you an idea of our hierarchy we have:
VIEW
|
HOME
|
CARD - Here is where we wish to display the various cards, I’ve gotten everything to display up to this point.

Here’s our current code for the files which we are trying to display:

HTML-----------------

    <ion-router-outlet name="view1"></ion-router-outlet>
    <ion-router-outlet name="view2"></ion-router-outlet>
</ion-grid>

CARD.PAGE.ROUTING.MODULE--------------

{
path: ‘card-page’,
component: CardPage,
children: [
{
path: ‘view1’,
outlet: ‘view1’,
loadChildren: () => import(’…/view1/view1.module’).then(m => m.View1PageModule)
},
{
path: ‘view2’,
outlet: ‘view2’,
loadChildren: () => import(’…/view2/view2.module’).then(m => m.View2PageModule)
}

I appreciate any help or hints, please let me know if you wish for me to expand on anything, Thank you for your time!

2

Even i have a MPA that and what i did was to use tabs inside on the SPA and then mount all the SPA’s on the sidemenu

so when user open the side menu he get the list of all the SPA’s that are there and once on the SPA he can make use of tabs on footer to navigate between various components

This method help to also solve another issue which was using action sheet for showing additional routes that would general be hidden on phone but would be nested in side-drawer while on a desktop mode…

PS:
MPA[Multi-Page-Application]
SPA[Single-Page-Application]
:slight_smile:

2 Likes
3

Thank you! I appreciate your help!